JSFiddle - React, Tailwind, and code Playground

by adoprog

HTML

<div id="target">
  Click here to fix heights
</div>

<br/>

<table>
  <tr>
    <th scope="col">Benchmark</th>
    <th scope="col">Year</th>
    <th scope="col">Month</th>
  </tr>
  <tr>
    <th scope="row">First</th>
    <td>7</td>
    <td>4,569</td>
  </tr>
  <tr>
    <th scope="row">
      <div class="benchmark-test">Loooooooooooooooooong<br> test</div>
      <div class="benchmark-test">Short test</div>
    </th>
    <td>
      <div class="item0">value1</div>
      <div class="item1">value2</div>
    </td>
    <td>
      <div class="item0">value1</div>
      <div class="item1">value2</div>
    </td>
  </tr>
  <tr>
    <th scope="row" class="benchmark-test">Last</th>
    <td>9</td>
    <td>6,219</td>
  </tr>
</table>

CSS

td,
th {
  border: 1px solid rgb(190, 190, 190);
  padding: 10px;
}

td {
  text-align: center;
}

tr:nth-child(even) {
  background-color: #eee;
}

th[scope='col'] {
  background-color: #696969;
  color: #fff;
}

th[scope='row'] {
  background-color: #d7d9f2;
}

caption {
  padding: 10px;
  caption-side: bottom;
}

table {
  border-collapse: collapse;
  border: 2px solid rgb(200, 200, 200);
  letter-spacing: 1px;
  font-family: sans-serif;
  font-size: 0.8rem;
}

JavaScript

$( "#target" ).on( "click", function() {
  fixTable();
} );

function fixTable() {
  // this selector can be scoped more specifically to target exact table on the page
	$("table tr").each(function() {
    // save the row reference for future usage
    const row = $(this);

    // get all the benchmark titles, they don't need an index in their class
    const benchmarkTitles = $(this).find(".benchmark-test");

    // now for each title:
    benchmarkTitles.each(function( index ) {
      // get the height of the title
      const titleHeight = $(this).height()

      // apply the height to the columns
      row.find(".item" + index).height(titleHeight);
    });
  });
}