<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';
}
This Pen doesn't use any external CSS resources.
This Pen doesn't use any external JavaScript resources.