create a table with thead wider than the table itself - html

Question

I have a very basic table, made up of 3 rows and 3 columns, and i'm trying to make it look like in this picture
(that is, the thead should be wider than the other rows). How do i achieve this effect? I tried with colspan but i can't get it right. The basic table is something like:
<table>
<thead>
<tr>
<th>Extra details</th>
</tr>
</thead>
<tbody>
<tr>
<td>A</td>
<td>B</td>
<td>C</td>
</tr>
<tr>
<td>A</td>
<td>B</td>
<td>C</td>
</tr>
<tr>
<td>A</td>
<td>B</td>
<td>C</td>
</tr>
</tbody>
</table>
Thanks!

Answer 1

You need to add colspan="3" to the th (number of cols must be identical in all tr in a table). Then make every last td in each tr much wider than the first two (using :last-child pseudo selector, see https://developer.mozilla.org/en-US/docs/Web/CSS/:last-child).
table {
width: 100%;
}
thead th {
background-color: #ddd;
}
td:last-child {
width: 60%;
}
<table>
<thead>
<tr>
<th colspan="3">Extra details</th>
</tr>
</thead>
<tbody>
<tr>
<td>A</td>
<td>B</td>
<td>C</td>
</tr>
<tr>
<td>A</td>
<td>B</td>
<td>C</td>
</tr>
<tr>
<td>A</td>
<td>B</td>
<td>C</td>
</tr>
</tbody>
</table>

Answer 2

you may use colspan and add a virtual forth col of 50% width:
tbody tr:after {
content: '';
display: table-cell;
width:50%
}
th {
background: gray;
border: solid;
}
table {
width: 100%;
}
<table>
<thead>
<tr>
<th colspan="4">Extra details</th>
</tr>
</thead>
<tbody>
<tr>
<td>A</td>
<td>B</td>
<td>C</td>
</tr>
<tr>
<td>A</td>
<td>B</td>
<td>C</td>
</tr>
<tr>
<td>A</td>
<td>B</td>
<td>C</td>
</tr>
</tbody>
</table>

Answer 3

You can use the caption element, which spans the table's width and is more semantically correct in your situation since it describes the entire table. Then use a pseudo-element to fill the remaining space in the rows and collapse the other columns.
table {
width: 100%;
}
caption {
border: 2px solid darkgray;
background-color: lightgray;
}
tr:after {
display: table-cell;
content: "";
width: 100%;
}
<table>
<caption>Extra details</caption>
<tbody>
<tr>
<td>A</td>
<td>B</td>
<td>C</td>
</tr>
<tr>
<td>A</td>
<td>B</td>
<td>C</td>
</tr>
<tr>
<td>A</td>
<td>B</td>
<td>C</td>
</tr>
</tbody>
</table>