Change first column of table to a row header appearance using CSS - html

Question

I'm kind of thinking this might not be possible using only CSS, but I just wanted to ask: Is it possible using only CSS to change the first <td> to appear as if it was a header for the entire column?
Sadly, I'm not able to easily change the html, and I can't easily run javascript to change the DOM, so I'm stuck with the following html structure:
<table>
<thead>
<tr>
<th>Hide this</th>
<th>text</th>
<th>value</th>
</tr>
</thead>
<tbody>
<tr>
<td>term a</td>
<td>Value of a</td>
<td>123</td>
</tr>
<tr>
<td>term b</td>
<td>Value of b</td>
<td>345</td>
</tr>
</tbody>
</table>
And I would love for it resemble a output like:
Some similar question, but which doesn't quite match my request:
HTML colspan in CSS
Change columnspan using CSS

Answer 1

If you are locked into creating a hacky solution, you can rewrite some css classes to use grid instead of using the table setup in the html.
Since html is just an data wrapper and css is the styling, you should theoretically solve most styling issues with css only.
This hacky soution overwrites all tr, td, and th elements to use grid instead.
we can restyle the tr width of the content to have 2 colums using
tr {
grid-template-columns: 1fr 1fr;
}
After that we can get the first child of an tr and style that to have full width of the container. in this example spanning from the first and the second element of the grid.
tbody tr td:first-child {
background: lightblue;
grid-column-start: 1;
grid-column-end: 3;
text-align: center;
}
This will give you an rendering looking like this, using only css to restyle the html.
tr,
td,
th {
display: grid;
}
table {
border: 1px solid gray;
}
td {
border: 1px solid gray;
}
tr {
grid-template-columns: 1fr 1fr;
}
thead tr th:first-child {
display: none;
}
tbody tr td:first-child {
background: lightblue;
grid-column-start: 1;
grid-column-end: 3;
text-align: center;
font-weight: bold;
}
<table>
<thead>
<tr>
<th>Hide this</th>
<th>text</th>
<th>value</th>
</tr>
</thead>
<tbody>
<tr>
<td>term a</td>
<td>Value of a</td>
<td>123</td>
</tr>
<tr>
<td>term b</td>
<td>Value of b</td>
<td>345</td>
</tr>
</tbody>
</table>
Again this should be a last effort since you will overwrite lots of basic styling, and force a more static rendering of the data.