JSFiddle - React, Tailwind, and code Playground

HTML

<div class="container">
<table>
  <tr>
    <td class="td-container">
      <a href="#">click</a>
    </td>
    <td class="td-container">
      <a href="#">click</a>
    </td>
    <td class="td-container">
      <a href="#">click</a>
    </td>
    <td class="td-container">
      <a href="#">click</a>
    </td>
    <td class="td-container">
      <a href="#">click</a>
    </td>
    <td class="td-container">
      <a href="#">click</a>
    </td>
    <td class="td-container-remain">
      <a href="#">click</a>
    </td>
  </tr>
</table>
</div>

CSS

table {
    width: 100%;
    background-color: red;
}
td.td-container{
     width: 100px;
     height: 40px;
     background-color: lightgreen;
}
td.td-container-remain{
     height: 40px;
     background-color: lightgreen;
}

.container{
  width: 100%;
}

a{
  display: block;
}