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

by fersterin

HTML

<table cellspacing="5" border="2" frame="box" summary="Monthly savings for the Flintstones family">
  <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: tan;
  border-color: red;
}
td {
  background: PaleGreen;
}
th {
  background: MediumSpringGreen;
}

JavaScript

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