JSFiddle - React, Tailwind, and code Playground

by Alexandru Gatea

HTML

<table>
  <thead>
    <tr>
      <!-- daca aici am 3 coloane -->
      <th></th>
      <th></th>
      <th></th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <!-- si aici am 3 coloane -->
      <td></td>
      <td></td>
      <td></td>
    </tr>
  </tbody>
</table>

<!-- ca sa repari layoutul tau -->

<table>
  <thead>
    <tr>
      <th></th>
      <th></th>
      <th></th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <!--     aici folosesti un colspan 3, pentru ca in head ai 3 coloane, extinzi celula asta pe toate 3, apoi bagi tabelul in ea -->
      <td colspan="3">
        <!-- ... -->
      </td>
    </tr>
  </tbody>
</table>

CSS

.tabel-raport {
  table-layout: fixed;
}

.tabel-raport td {
  overflow: hidden;
}

.tabel-raport {
  border: 1px solid #000;
  border-collapse: collapse;
  width: 100%;
}

.tabel-raport-body {
  border: 1px solid #000;
  border-collapse: collapse;
}

.research {
  table-layout: fixed;
}

.research td {
  overflow: hidden;
}

.research {
  border-collapse: collapse;
  width: 100%;
  text-align: center;
}

.accordion td {
  border-right: 1px solid #000;
  border-collapse: collapse;
  width: 10px;
  padding: 5px;
}

.accordion td:last-child {
  border: none;
}

.linii-cont td {
  border-right: 1px solid #000;
  border-collapse: collapse;
}

.linii-cont td:last-child {
  border: none;
}