JSFiddle - React, Tailwind, and code Playground

HTML

<html>
  <table id="display-table" class="table-layout">
  <thead>
    <tr>
      <th>Name</th>
      <th>Lastname</th>
    </tr>
  </thead>
  <tbody id="tbody">
    <tr>
      <td>Alan</td>
      <td>Turing</td>
    </tr>
    <tr>
      <td>Bjarne</td>
      <td>Stroustrup</td>
    </tr>
  </tbody>
  </table>
</html>

CSS

.table-layout {
    text-align: center;
    border: 1px solid black;
    border-collapse: collapse;
    font-family:"Trebuchet MS";
    margin: 0 auto 0;
}
.table-layout td, .table-layout th {
    border: 1px solid grey;
    padding: 5px 5px 0;
}
.table-layout td {
    text-align: left;
}
.selected {
    color: red;
}

JavaScript

const tbody = document.getElementById("tbody");
let rowSelected;

tbody.onclick = (e) => {
  for (let i = 0; i < e.path.length; ++i) {
    if (e.path[i].tagName == "TR") {
      selectRow(e.path[i]);
      break;
    }
  }
};

function selectRow(r) {
  if (rowSelected !== undefined) rowSelected.style.backgroundColor = "white";

  rowSelected = r;
  rowSelected.style.backgroundColor = "dodgerblue";
}