JSFiddle - React, Tailwind, and code Playground

HTML

<div style='margin-left:5pt;margin-right:5pt'><table class='cell-border' id='example'><thead>
    <tr>
        <th>Commessa</th>
        <th>Gruppo</th>
        <th>Tipo</th>
        <th>Descrizione</th>
        <th>Margine (sull'ordinato)</th>
        <th>Ricarica (sull'ordinato)</th>
        <th>Stato</th>
        <th>SottoStato</th>
        <th>Varianti</th>
        <th>Ordini</th>
     </tr></thead><tfoot>
     <tr>
     	<td style='width:2%'>Commessa</td>
     	<td style='width:2%'>Gruppo</td>
     	<td style='width:2%'>Tipo</td>
     	<td style='width:20%'>Descrizione</td>
     	<td style='width:2%'>Margine (sull'ordinato)</td>
      <td style='width:2%'>Ricarica (sull'ordinato)</td>
      <td style='width:2%'>Stato</td>
      <td style='width:2%'>SottoStato</td>
     	<td style='width:10%;color:blue;font-weight:bold'>Varianti</td>
        <td style='width:10%;color:blue;font-weight:bold'>Ordini</td>
     </tr>
     </tfoot><tbody><tr>
  <td><a href='analisicommessa.php?fromCommessa=2640&toCommessa=2640&DataInizio=01-01-2011&DataFine=31-05-2024&business=' target='_blank'>32/07859</a></td>
  <td>INST</td>
  <td>Standard</td>
  <td>Commessa di prova</td>
  <td>31,76 %</td>
  <td>46,55 %</td>
  <td>In Progress</td>
  <td>APERTA</td>
  <td><a href='lista_varianti_cliente.php?Commessa=2640&DataInizio=01-01-2011&DataFine=31-05-2024' target='_blank'>1500.50</a></td>
  <td><a href='lista_ordini_cliente.php?Commessa=2640&Cliente=&DataInizio=01-01-2011&DataFine=31-05-2024' target='_blank'>3000.50</a></td>
</tr>
<tr>
  <td><a href='analisicommessa.php?fromCommessa=2640&toCommessa=2640&DataInizio=01-01-2011&DataFine=31-05-2024&business=' target='_blank'>32/07860</a></td>
  <td>INST</td>
  <td>Standard</td>
  <td>Commessa di prova</td>
  <td>25,76 %</td>
  <td>34,55 %</td>
  <td>In Progress</td>
  <td>APERTA</td>
  <td><a href='lista_varianti_cliente.php?Commessa=2640&DataInizio=01-01-2011&DataFine=31-05-2024' target='_blank'>2500.50</a></td>
  <td><a...

CSS

<!-- Static Site level CSS
    <link rel="stylesheet" type="text/css" href="/static/site.css">-->   
   
   <!-- So different apps can add their own CSS or SCRIPTS to the template-->
    <link href="https://cdn.datatables.net/1.13.6/css/dataTables.bootstrap5.min.css" rel="stylesheet">
<link href="https://cdn.datatables.net/colreorder/1.7.0/css/colReorder.bootstrap5.min.css" rel="stylesheet">
<link href="https://cdn.datatables.net/datetime/1.5.1/css/dataTables.dateTime.min.css" rel="stylesheet">
<link href="https://cdn.datatables.net/searchbuilder/1.5.0/css/searchBuilder.bootstrap5.min.css" rel="stylesheet">
<link href="https://cdn.datatables.net/staterestore/1.3.0/css/stateRestore.bootstrap5.min.css" rel="stylesheet">

.dataTables_filter {
   width: 92%;
   float: center;
   text-align: center;
}

/*
 * Table styles
 */
table.dataTable {
  width: 100%;
  //margin: 0 auto;
  //clear: both;
  border-collapse: separate;
  //border-spacing: 0;
  /*
   * Header and footer styles
   */
  /*
   * Body styles
   */
}
table.dataTable thead th,
table.dataTable tfoot th {
  font-weight: bold;
}
table.dataTable thead th,
table.dataTable thead td {
  padding: 10px 18px;
  border-bottom: 1px solid #111;
}
table.dataTable thead th:active,
table.dataTable thead td:active {
  outline: none;
}
table.dataTable tfoot th,
table.dataTable tfoot td {
  padding: 10px 18px 6px 10px;
  border-top: 1px solid #111;
}
table.dataTable thead .sorting,
table.dataTable thead .sorting_asc,
table.dataTable thead .sorting_desc {
  cursor: pointer;
  *cursor: hand;
}
table.dataTable thead .sorting,
table.dataTable thead .sorting_asc,
table.dataTable thead .sorting_desc,
table.dataTable thead .sorting_asc_disabled,
table.dataTable thead .sorting_desc_disabled {
  background-repeat: no-repeat;
  background-position: center right;
}
/*table.dataTable thead .sorting {
    background-image: url(bg.gif);
}
table.dataTable thead .sorting_asc {
    background-image: url(asc.gif);
}
table.dataTable thead...

JavaScript

<!-- Bootstrap CSS  5-->
    <link crossorigin="anonymous" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" integrity="sha384-rbsA2VBKQhggwzxH7pPCaAqO46MgnOM80zW1RWuH61DGLwZJEdK2Kadq2F9CUG65" rel="stylesheet">



    <!--    jQuery -->
    <script
        src="https://code.jquery.com/jquery-3.7.0.min.js"
        integrity="sha256-2Pmvv0kuTBOenSvLm6bvfBSSHrUJ+3A7x6P5Ebd07/g="
        crossorigin="anonymous"></script>

    <!--  Cool icons for use in bootstrap elements
    <script src="https://kit.fontawesome.com/d4ed890994.js" crossorigin="anonymous"></script> -->

    <!-- Static Site level CSS
    <link rel="stylesheet" type="text/css" href="/static/site.css">-->

    <!-- So different apps can add their own CSS or SCRIPTS to the template-->
    <link href="https://cdn.datatables.net/1.13.6/css/dataTables.bootstrap5.min.css" rel="stylesheet">
 <!--<link href="https://cdn.datatables.net/buttons/2.4.1/css/buttons.bootstrap5.min.css" rel="stylesheet">-->
<link href="https://cdn.datatables.net/colreorder/1.7.0/css/colReorder.bootstrap5.min.css" rel="stylesheet">
<link href="https://cdn.datatables.net/datetime/1.5.1/css/dataTables.dateTime.min.css" rel="stylesheet">
<link href="https://cdn.datatables.net/searchbuilder/1.5.0/css/searchBuilder.bootstrap5.min.css" rel="stylesheet">
<link href="https://cdn.datatables.net/staterestore/1.3.0/css/stateRestore.bootstrap5.min.css" rel="stylesheet">
 
<script src="https://cdnjs.cloudflare.com/ajax/libs/jszip/3.10.1/jszip.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/pdfmake/0.2.7/pdfmake.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/pdfmake/0.2.7/vfs_fonts.js"></script>
<script src="https://cdn.datatables.net/1.13.6/js/jquery.dataTables.min.js"></script>
<script src="https://cdn.datatables.net/1.13.6/js/dataTables.bootstrap5.min.js"></script>
<script src="https://cdn.datatables.net/buttons/2.4.1/js/dataTables.buttons.min.js"></script>
<script...