nav[aria-label="Primary Navigation"] { padding: 0; & ul { list-style: none; width: 100%; display: flex; flex-direction: row; justify-content: start; align-items: start; gap: 30px; padding: 0; & li { margin: 0; } & ul li { list-style: none; } } }

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
##
&lt;style&gt;
.tableWrapper th {
    border: $border;
    border-style: solid;
}
.tableWrapper td {
    border: $border;
    border-style: solid;
}
&lt;/style&gt;
##
&lt;div class=tableWrapper&gt;
$body
&lt;/div&gt;

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())
##
&lt;style&gt;
.$id th {
    border: $border;
    border-style: solid;
}
.$id td {
    border: $border;
    border-style: solid;
}
&lt;/style&gt;
##
&lt;div id=$id&gt;
$body
&lt;/div&gt;

PRODUCES

Accepted answers

David at David Simpson Apps

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.

All comments

David at David Simpson Apps

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)
##
&lt;style&gt;
.$id th {
    border: $border;
    border-style: solid;
}
.$id td {
    border: $border;
    border-style: solid;
}
&lt;/style&gt;
##
&lt;div class=$id&gt;
$body
&lt;/div&gt;

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

Welcome!

It looks like you're new here. Sign in or register to get started.

Quick Links

Find more posts tagged with

confluence

jira