JSFiddle - React, Tailwind, and code Playground

by Corentin Ballot

HTML

<div class="container">
  <table class="table">
    <thead>
      <tr>
         <th>header 1</th>
         <th>header 2</th>
         <th>header 3</th>
         <th>header 4</th>
         <th>header 5</th>
      </tr>
    </thead>
    
    <tbody>
      <tr>
         <td>
           <div class="w-12">
             Il n'y a personne qui n'aime la souffrance pour elle-même.
           </div>
         </td>
         <td>    
           <div class="w-12">
             Il n'y a personne qui n'aime la souffrance pour elle-même.
           </div>
         </td>
         <td>
           <div class="w-12">
             Il n'y a personne qui n'aime la souffrance pour elle-même.
           </div>
         </td>
         <td>
           <div class="w-12">
             Il n'y a personne qui n'aime la souffrance pour elle-même.
           </div>
         </td>
         <td>
           <div class="w-12">
             Il n'y a personne qui n'aime la souffrance pour elle-même.
           </div>
         </td>
         </tr>
    </tbody>
    
  </table>
</div>

CSS

.container {
  /*width: 100%;
  overflow:hidden;*/
}

.table {
  width: 100%;
  overflow: hidden;
}

.table th, .table td {
  border: 1px solid #333;
  width: auto;
}

.w-12 {
  width: 12%;
  max-width: 12%;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}