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

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:

CodePudding user response：

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.

CodePudding user response：

No hacks needed:

Make sure both header row and and table rows use equal number of columns
Use colspan="2" to span the text above
use <th> for the bold text

Fairly straightforward use of a HTML table.

table {
    border-collapse: collapse;
    border-spacing: 0px;
}

th,td  { border: 1px solid black }
td     { tex-align: center }

<table>
  <thead>
    <tr>
      <th>text</th>
      <th>value</th>
    </tr>
  </thead>
  <tbody>
    <tr><th colspan="2">term a</th></tr>
    <tr>
      <td>Value of a</td>
      <td>123</td>
    </tr>
    <tr><th colspan="2">term b</th></tr>
    <tr>
      <td>Value of b</td>
      <td>345</td>
    </tr>
  </tbody>
</table>