Question

I am using the colgroup tag to style a column in my html table. However, using border-radius, -webkit-border-radius and -moz-border-radius does not work…Does colgroup support border radius or do I need to apply classes to the individual cells?

HTML:

<table>
    <colgroup align="right"></colgroup>
    <colgroup class="priceCol" align="right"></colgroup>
    <tr><td>1 Session:</td><td>R20</td></tr>
    <tr><td>5 Sessions:</td><td>R100</td></tr>
    <tr><td>10 Sessions:</td><td>R180</td></tr>
    <tr><td>15 Sessions:</td><td>R250</td></tr>
</table>

CSS;

.priceCol{
    background: #ff0000;
    border: 1px solid #333;
    padding-left: 5px;
    -webkit-border-radius: 8px;
    -moz-border-radius: 8px;
    border-radius: 8px;
}

Thank you

Answer 1

It is the individual table cells (or the entire table itself) that has the borders, so applying a border-radius to a column wouldn’t have any effect anyway (it’d be like specifying a border-radius on a container <div> when it’s the contained one that has the border).

You will need to apply classes to the individual cells to achieve the effect you want.