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

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:

you could probably do this but it would be by overwriting the table structure as a grid and then realigning it. since `colspan` is not available in css. So - can you do it "yes" would it be a terrible hacky solution? "yes". — Nils Kähler, Jan 08 '23 at 15:52
I could live with a terribly hacky solution, and I was thinking about overwriting into a grid, but not sure how to even get started doing something like that... — holroy, Jan 08 '23 at 16:02

score 1 · Accepted Answer · answered Jan 08 '23 at 16:15

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.

Sorry, it took me so long, been occupied with other stuff. Will test this tonight. It does however look very promising. — holroy, Jan 14 '23 at 16:50
With a little bit of tweaking, due to other table formatting stuff (like `max-width` settings), this worked liked a charm, and I could also extend it to variable number of columns. (Now on to the harder case of allowing multiple rows for each term... ) — holroy, Jan 14 '23 at 17:36

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

1 Answers1