JSFiddle - React, Tailwind, and code Playground

HTML

<table id="raceTable">
  <colgroup>
    <col/>
    <col/>
    <col/>
    </colgroup>
    <thead>
      <tr>
        <th colspan="3">3 Players</th>
      </tr>
    </thead>
    <tbody>
      <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 {
  width: 100%;
  table-layout: fixed;
  line-height: 50px;
}

thead {
  background: green;
}

td {
  width: 100%;
}

col {
  background: gray;
}

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

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

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