<table cellspacing="0" id="table">
<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>
<p>Натисність на кнопку, щоб побачити як змінюється візуалізація таблиці при різних значеннях властивості.</p>
<button id="b" data-ec="hide">TOGGLE EMPTY-CELLS</button>body {
text-align: center;
padding-top: 20px;
}
table {
border: solid 1px black;
border-collapse: separate;
border-spacing: 5px;
width: 500px;
margin: 0 auto;
empty-cells: hide;
font-size: 18px;
}
th, td {
text-align: center;
border: solid 1px black;
padding: 10px;
}
button {
margin-top: 10px;
padding: 20px;
}
p{
text-align: center;
font-size: 18px;
}var b = document.getElementById('b'),
t = document.getElementById('table');
b.onclick = function () {
if (this.getAttribute('data-ec') === 'hide') {
t.style.emptyCells = 'show';
this.setAttribute('data-ec', 'show');
} else {
t.style.emptyCells = 'hide';
this.setAttribute('data-ec', 'hide');
}
};
External CSS
This Pen doesn't use any external CSS resources.