Отступы в таблице

by fersterin

HTML

<table cellspacing="2">
  <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 {
  background: Green;
  padding: 10px 20px 10px 20px;
  border: 3px solid SandyBrown;
  color: white;
}
tfoot tr td{
  background: lightblue;
}

JavaScript

/* Синий цвет это фон table, а не границы. Чтобы убрать это расстояние нужно скалапсировать ячейки, то есть слить. Ниже напишу скрипт, который убирает зазоры между ячейками. */