How to format a table to have rounded corners

OL Connect Enterprise Designer
1

Hi There

I was wondering if you could give me any advice about getting my dynamic table to have rounded corners. I have tried using Corner-Radius and setting it to 25% and also setting the border-radius but It doesn’t seem to do anything.

Thanks in advance!

2

How about this. It assumes the table has class “rounded” and a footer. If the table doesn’t have a footer it may be easier to set the appropriate border styles in a script instead of through CSS, since a dynamic table has some hidden body rows that interfere with the :last-child pseudo selector.

/* border-collapse:collapse does not work well in combination with border-radius. */
table.rounded {
border-collapse: separate;
border-spacing: 0px;
}

/* Right and bottom border lines. */
table.rounded tr td {
border-right: 1px solid black;
border-bottom: 1px solid black;
border-left: 0px;
border-top: 0px;
}

/* Top border lines for all cells in the first row of the header. */
table.rounded thead tr:first-child td {
border-top: 1px solid black;
}

/* Left border lines for all cells in the first column. */
table.rounded tr td:first-child {
border-left: 1px solid black;
}

/* Top-left corner radius. */
table.rounded thead tr:first-child td:first-child {
border-top-left-radius: 6px;
}

/* Top-right corner radius. */
table.rounded thead tr:first-child td:last-child {
border-top-right-radius: 6px;
}

/* Bottom-left corner radius. */
table.rounded tfoot tr:last-child td:first-child {
border-bottom-left-radius: 6px;
}

/* Bottom-right corner radius. */
table.rounded tfoot tr:last-child td:last-child {
border-bottom-right-radius: 6px;
}