JSFiddle - React, Tailwind, and code Playground

by fersterin

HTML

<table cellspacing="2" border="5px">
  <thead>
    <tr>
      <th>Lorem ipsum.</th>
      <th>Rerum, exercitationem?</th>
      <th>Laboriosam, commodi.</th>
    </tr>
   </thead>
    <tbody >
      <tr>
        <td>Lorem.</td>
        <td>At.</td>
        <td>Vel.</td>
      </tr>
      <tr>
        <td>Lorem.</td>
        <td>At.</td>
        <td>Vel.</td>
      </tr>
      <tr>
        <td>Lorem.</td>
        <td>At.</td>
        <td>Vel.</td>
      </tr>
    </tbody>
    <tfoot>
      <tr>
        <td>Lorem ipsum.</td>
        <td>Deleniti, sed.</td>
        <td>Et, odit.</td>
      </tr>
    </tfoot>
</table>
<br>
<button onclick="myFunction()">Убрать отступы у ячеек</button>
<script>
function myFunction(){
		document.getElementsByTagName("table")[0].style.borderCollapse = "collapse";
}

</script>

CSS

table {
  background: blue;
}
td {
  background: PaleGreen;
  padding: 12px;
}
th:first-child {
  color: white;
  width: 250px;
}