'Table th border radius not rounding OR using border-collapse makes rest of table mess up

The border around my <th> element isn't rounding with the radius.

Here's my code: http://jsfiddle.net/5zUT8/

I can use border-collapse: separate; but that makes borders inside the table look thicker.

When I remove the 1px border it makes the table header look 1px smaller then the rest of the table.

Not sure what to do in order to get the border-radius working on the header without compromising the rest of the style.

htmlcsscss-tables


Solution 1:[1]

Something like this? — http://jsfiddle.net/5zUT8/1/

I'm basically adding a 1px border to the right and bottom of each td, except for the first one in each tr, which includes a border to the left. This overcomes the 2 × 1px "thick" border you would see otherwise.

td {
    border-color:#ccc;
    border-style:solid;
    border-width:0 1px 1px 0;
}

td:first-child {
    border-width:0 1px 1px 1px;
}

Solution 2:[2]

table.border {
  border-collapse: separate;
  border-spacing: 0;
  min-width: 350px;
}
table.border tr th,
table.border tr td {
    padding: 0.25em 1em;
    vertical-align: middle;
  border-right: 1px solid #ccc;
  border-bottom: 1px solid #ccc;
  padding: 5px;
}
table.border tr th:first-child,
table.border tr td:first-child {
  border-left: 1px solid #ccc;
}
table.border tr th {
background:#222a3d;
 border: 1px solid #222a3d;
    color: #bdccd3;
  text-align: left;
}

/* top-left border-radius */
table.border tr:first-child th:first-child {
  border-top-left-radius: 6px;
}

/* top-right border-radius */
table.border tr:first-child th:last-child {
  border-top-right-radius: 6px;
}

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

/* bottom-right border-radius */
table.border tr:last-child td:last-child {
  border-bottom-right-radius: 6px;
}
<table class="border" cellspacing="0">
    <thead>
        <tr>
            <th>Heading 1</th>
            <th>Heading 2</th>
            <th>Heading 3</th>
        </tr>
    </thead>
<tbody> 
<tr>
    <td>Content Left</td>
    <td>Content Middle</td>
    <td>Content Right</td>
</tr>
<tr>
    <td colspan="3" >Bottom Full Section</td>
</tr>
</tbody>

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source
Solution 1 Coby
Solution 2 Prem Signh

Related Questions