How to display borders in thead with border-collapse? - html

Question

I would like to collapse only the out-side border, not inside of the thead:
table, tr {
border: 1px solid black;
padding: 7px;
border-collapse: collapse;
}
th {
background: #ccccff;
}
<table>
<thead>
<tr>
<th>Data 1</th>
<th>Data 2</th>
</tr>
</thead>
</table>
will not show the borders between the th like Data 1 | Data 2, why? (And how to add these the border between the th elements)?

Answer 1

Remove border: 1px solid black from table, tr. And set the border for the right side border-right: 1px solid black. Also, using the :last-of-type pseudo-class, remove the border for the last element.
table, tr {
/*border: 1px solid black;*/
padding: 7px;
border-collapse: collapse;
}
th {
background: #ccccff;
border-right: 1px solid black;
}
th:last-of-type {
border-right: unset;
}
<table>
<thead>
<tr>
<th>Data 1</th>
<th>Data 2</th>
<th>Data 3</th>
<th>Data 4</th>
<th>Data 5</th>
<th>Data 6</th>
<th>Data 7</th>
<th>Data 8</th>
<th>Data 9</th>
<th>Data 10</th>
</tr>
</thead>
</table>

Answer 2

border-collapse doesn't have the effect you think. It just prevents gaps between the borders of each cell. This is what happens without border-collapse:
table {
border: 1px solid black;
padding: 7px;
border-collapse: none;
}
th,td {
border: 1px solid blue;
}
<table>
<thead>
<tr>
<th>Data 1</th>
<th>Data 2</th>
</tr>
</thead>
</table>
The other problem is that you are adding the border to the tr - this is just the row, it doesn't apply to the cells inside the row. Also FYI, adding a border to the table in CSS only adds the border around the outside of the whole table.
To apply borders to the cells, you need to add the border CSS to the th elements (and td for the rest of your table), e.g.:
th, td {
border: 1px solid blue;
}
Working Snippet with examples of just rows with borders and th/tds with borders:
table,
tr {
border: 1px solid black;
padding: 7px;
border-collapse: collapse;
text-align:center;
}
th {
border: 1px solid blue;
}
tr.showborder td {
border: 1px solid red;
}
<table>
<thead>
<tr>
<th>Data 1</th>
<th>Data 2</th>
<th>Data 3</th>
</tr>
</thead>
<tbody>
<tr>
<td>this ROW</td>
<td> has a</td>
<td>border</td>
</tr>
<tr>
<td>this ROW</td>
<td> also has a</td>
<td>border</td>
</tr>
<tr class="showborder">
<td>The cells in </td>
<td>this row all</td>
<td>have borders</td>
</tr>
<tr class="showborder">
<td>The cells in </td>
<td>this row all</td>
<td>have borders</td>
</tr>
</tbody>
</table>