How do I apply border style attributes to a <colgroup> tag?

Question

I am having trouble using the < colgroup > tag to style the borders of a table column in CSS.

Here is the code I am trying to run:

 <table style='font-size:18px; margin:auto; text-align:center; font-family:sans-serif; border-spacing:1.875em;'> <caption style='text-align:left;'>Wait...</caption> <colgroup> <col span='1' style='border:solid firebrick;'> </colgroup> <tr> <td style='color:blue;'>They chose:</td> <td style='color:blue;'>They chose:</td> </tr> <tr> <th>Option 1</th> <th>Option 2</th> </tr> <tr> <td>You: $4</td> <td>You: $5</td> </tr> <tr> <td>Them: $5</td> <td>Them: $4</td> </tr> </table>

As you will see if you run it yourself, the code does not produce the firebrick border that I would like to have around the first column of my table. Even when I apply "border-spacing: 0em" and "border-collapse: collapse" to the < table > tag, the firebrick border does not appear.

Does anyone know what I am doing wrong?

Answer 1

You need to set border-collapse to collapse on the table.

 <table style='border-collapse: collapse; font-size:18px; margin:auto; text-align:center; font-family:sans-serif; border-spacing:1.875em;'> <caption style='text-align:left;'>Wait...</caption> <colgroup> <col span='1' style='border:solid firebrick;'> </colgroup> <tr> <td style='color:blue;'>They chose:</td> <td style='color:blue;'>They chose:</td> </tr> <tr> <th>Option 1</th> <th>Option 2</th> </tr> <tr> <td>You: $4</td> <td>You: $5</td> </tr> <tr> <td>Them: $5</td> <td>Them: $4</td> </tr> </table>

Obviously you will then need to make adjustments to get whatever spacing between cells you require.