JSFiddle - React, Tailwind, and code Playground

HTML

<table>
  <tr>
    <td data-header="Name">asfd</td>
    <td data-header="Age">10</td>
      <td data-header="gender">asfd</td>
  </tr>
  <tr>
    <td data-header="Name">asfd</td>
    <td data-header="Age">10</td>
      <td data-header="gender">asfd</td>
  </tr>
  <tr>
    <td data-header="Name">asfd</td>
    <td data-header="Age">10</td>
      <td data-header="gender">asfd</td>
  </tr>
  
</table>

CSS

tr td {background:black;color:white}
tr td:nth-child(2) {background:white;color:black}
tr td:nth-child(3) {background:pink}
td:before {
    content:"hi: " attr(data-header) " -  the end";
    display:block;
    padding-bottom:10px
}
table, tr, td, tbody {display:block}