JSFiddle - React, Tailwind, and code Playground

HTML

<table class="list">
  <thead>
    <tr>
      <th class="list__item1">item1</th>
      <th class="list__item2">item2</th>
      <th class="list__item3">item3</th>
      <th class="list__item4">item4</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Nemo delectus eveniet eligendi. Nam a quis culpa sed deserunt perspiciatis repellendus vitae, vero accusantium. Quia laboriosam architecto, possimus, assumenda corporis nemo.</td>
      <td>hogehoge</td>
      <td>fugafuga</td>
      <td>foobar</td>
    </tr>
  </tbody>
</table>

CSS

* {
  margin: 0;
  padding: 0;
}

.list {
  width: 100%;
  text-align: center;
  border-collapse: collapse;
  table-layout: fixed;
}

.list__item1 {
  width: 40%;
}

.list__item2 {
  width: 25%;
}

.list__item3 {
  width: 20%;
}

.list__item4 {
  width: 15%;
}

tr {
  border-bottom: solid 1px #333;
}

td {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  padding: 1rem 0;
}