CODEWITHSUNDEEP
htmlcsshtml-tablebordercolgroup
puzzleGuzzle
puzzleGuzzle

Reputation: 91

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

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?

Upvotes: 1

Views: 404

Answers (1)

A Haworth
A Haworth

Reputation: 36492

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.

Upvotes: 1

Related Questions