Table Border Macro -- Variable Border Width

[Rachael Birky]

Hello!

I'm fairly new to Confluence and Velocity.
I was able to create a macro that removes table borders on a page.
Now I am attempting to create a macro that allows the user to set the table border between 0 and 2 pixels, unique for each table on the page! (The user will use a separate macro for each table).
At the moment, using a div and class, the last chunk CSS code affects every table on the page, as expected. So I would like to use an id instead, and generate the id to be unique using a time stamp.
However, the code is now ineffective.
Any thoughts?

CODE

## This macro takes a table and lets the user choose a border width limited to 0 (none), 1, or 2
## @param width:title=Width|type=enum|enumValues=0,1,2|desc=Set border width, limited to 0,1, or 2
##
#if (!$paramwidth)
#set ($border = "0px")
#else
#set($border = "${paramwidth}px")
#end
##
<style>
.tableWrapper th {
    border: $border;
    border-style: solid;
}
.tableWrapper td {
    border: $border;
    border-style: solid;
}
</style>
##
<div class=tableWrapper>
$body
</div>

PRODUCES

CODE

## This macro takes a table and lets the user choose a border width limited to 0 (none), 1, or 2
## @param width:title=Width|type=enum|enumValues=0,1,2|desc=Set border width, limited to 0,1, or 2
##
#if (!$paramwidth)
#set ($border = "0px")
#else
#set($border = "${paramwidth}px")
#end
#set($id = $content.getCurrentDate().getTime())
##
<style>
.$id th {
    border: $border;
    border-style: solid;
}
.$id td {
    border: $border;
    border-style: solid;
}
</style>
##
<div id=$id>
$body
</div>

PRODUCES

[David at David Simpson Apps · Accepted solution]

That's nearly there, but id attributes cannot be numbers, well perhaps now with HTML5. Instead try something like:

#set($id = "random-" + $action.dateFormatter.calendar.timeInMillis) 

Hat tip: @Joseph Clark-- https://answers.atlassian.com/questions/218260/random-number-with-velocity

If that doesn't work, add a data-border-width attribute to the wrapping div and then use JavaScript to apply that to the enclosed table cells -- classy, I know.

[Rachael Birky]

Thank you so so much!! This worked beautifully!

I had to remove the dash, and I didn't include the <span>, but it's perfect!

For anyone interested, here is the full solution:

## This macro takes a table and lets the user choose a border width limited to 0 (none), 1, or 2
## @param width:title=Width|type=enum|enumValues=0,1,2|desc=Set border width, limited to 0,1, or 2
##
#if (!$paramwidth)
#set ($border = "0px")
#else
#set($border = "${paramwidth}px")
#end
#set($id = "random" + $action.dateFormatter.calendar.timeInMillis)
##
<style>
.$id th {
    border: $border;
    border-style: solid;
}
.$id td {
    border: $border;
    border-style: solid;
}
</style>
##
<div class=$id>
$body
</div>

[David at David Simpson Apps]

It looks like the editor added the nasty <span> -- I didn't write that. Glad you got the gist of it ;)