<p>Вибери потрібне значення для <code>border-spacing</code>:</p>

<input type="number" class="input" min="0" id="x" onchange="change()" placeholder="0"></input>
<input type="number" class="input" min="0" id="y" onchange="change()" placeholder="0"></input>

<table id="block">
  <tr>
    <th>Заголовок</th>
    <th>Заголовок</th>
    <th>Заголовок</th>
  </tr>
  <tr>
    <td>Клітинка</td>
    <td>Клітинка</td>
    <td>Клітинка</td>
  </tr>
  <tr>
    <td>Клітинка</td>
    <td>Клітинка</td>
    <td>Клітинка</td>
  </tr>
</table>
body {
	padding: 36px;
  text-align: center;
  line-height: 1.45;
  font-size: 20px;
  font-family: sans-serif;
}

.input {
  margin-bottom: 16px;
  padding: 1px;
  font-size: 13px;
}

#block {
  border: 1px solid #666;
  width: 100%;
  transition: border-spacing .15s ease-in 0s;
  border-spacing: 0 0;
}

td, th {
  border: 1px solid #666;
  padding: 16px;
  text-align: center;
}
var block = document.getElementById('block');

function change() {
  var x = document.getElementById('x').value;
  var y = document.getElementById('y').value;
  block.style.borderSpacing = x+'px '+y+'px';
}

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.