JSFiddle - React, Tailwind, and code Playground

HTML

<div style="width: 400px;">
  <table style="table-layout: fixed; width: 100%;">
    <thead>
      <tr>
        <th></th>
        <th></th>
        <th></th>
        <th></th>
      </tr>
    </thead>
    <tbody>
      <tr class="odd">
        <td class="">
          <a href="#">The_first_line</a>
        </td>
        <td class="">
          <a href="#">The_second_but_a_long_line_with_so_many_characters</a>
        </td>
        <td class="">
          <ul class="">
            <li class=""><a href="#" rel="tag" title="" class="">The simple</a>
            </li>
          </ul>
        </td>
        <td>
          <a href="#">last</a>
        </td>
      </tr>
    </tbody>
  </table>
</div>

CSS

div {
  width: 400px;
  padding: 5px;
  border: 1px solid red;
}

table {
  table-layout: fixed;
  width: 100%;
  border: 1px dotted green;
}

tr td {border: 1px solid green;
  word-break: break-all;
}


tr th:first-child {
  width: 50px;
}

tr th:nth-child(2) {
  width: 150px;
}