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

Issue

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?

Solution

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.

Answered By - A Haworth

Answer Checked By - Candace Johnson (PHPFixing Volunteer)