JSFiddle - React, Tailwind, and code Playground

by GCyrillus

HTML

<table id="raceTable">
  <tbody>
    <tr>
      <th colspan="3">3 Players</th>
    </tr>
    <tr>
      <td>1st</td>
      <td><a>Link to profile of player A</a></td>
      <td>00:22:12</td>
    </tr>
    <tr>
      <td>2st</td>
      <td><a>Link to profile of player B</a></td>
      <td>00:23:12</td>
    </tr>
    <tr>
      <td>3st</td>
      <td><a>Link to profile of player C Link to profile of player C Link to profile of player C</a></td>
      <td>00:24:15</td>
    </tr>
  </tbody>
</table>

CSS

table,
tr {
  width: 100%;
  table-layout: fixed;
  line-height: 50px;
  border-spacing: 0;
}

tr {
  display: table;
}

th {
  background: magenta
}

td {
  background: gray;
}

td:first-child,
td:last-child {
  width: 30px;
  background: red;
}

td:last-child {
  background: cyan;
  width: 100px;
}

a {
  display: block;
  background-color: white;
  text-overflow: ellipsis;
  white-space: nowrap;
  overflow: hidden;
}