JSFiddle - React, Tailwind, and code Playground

HTML

<table class="table1">
  <thead>
    <tr>
      <th>Indice</th>
      <th>Charge</th>
      <th>Indice</th>
      <th>Charge</th>
    </tr>
  </thead>
  
  <tbody>
    <tr>
      <td data-label=""><b>50</b></td>
      <td data-label="">190 kg</td>
      <td data-label=""><b>60</b></td>
      <td data-label="">250 kg</td>
    </tr>
       <td data-label=""><b>70</b></td>
      <td data-label="">335 kg</td>
      <td data-label=""><b>80</b></td>
      <td data-label="">450 kg</td>
    <tr>
     </tr>
       <td data-label=""><b>90</b></td>
      <td data-label="">600 kg</td>
      <td data-label=""><b>100</b></td>
      <td data-label="">800 kg</td>
    <tr>
      
    </tr>
  </tbody>
</table>

CSS

/* *,*::before,*::after{
  box-sizing: border-box;
} */

body {
  font-family: cursive;
}

.table1 {
    border-collapse: collapse;
	  margin: auto; /* Centre le tableau */
}

td, th {
  font-size: 0.9em;
  margin: 10px;
  padding: 2px 8px 2px 8px;
  border: 1px solid black;
  text-align: center;
}

@media only screen and (max-width: 700px){
  table, thead, tbody, tr, th, td {
   thead{
      display: none;
    }
  }
  }