<button>Переключити позицію заголовку таблиці</button>
<table>
<caption>Заголовок таблиці</caption>
<tr>
<td>Example text</td>
<td>Example text</td>
<td>Example text</td>
</tr>
<tr>
<td>Example text</td>
<td>Example text</td>
<td>Example text</td>
</tr>
<tr>
<td>Example text</td>
<td>Example text</td>
<td>Example text</td>
</tr>
<tr>
<td>Example text</td>
<td>Example text</td>
<td>Example text</td>
</tr>
<tr>
<td>Example text</td>
<td>Example text</td>
<td>Example text</td>
</tr>
<tr>
<td>Example text</td>
<td>Example text</td>
<td>Example text</td>
</tr>
<tr>
<td>Example text</td>
<td>Example text</td>
<td>Example text</td>
</tr>
<tr>
<td>Example text</td>
<td>Example text</td>
<td>Example text</td>
</tr>
<tr>
<td>Example text</td>
<td>Example text</td>
<td>Example text</td>
</tr>
</table>body {
margin: 20px;
}
button {
border: 2px solid red;
background: yellow;
padding: 10px;
display: block;
cursor: pointer;
margin: 0 auto 20px;
}
table {
min-width: 80%;
margin: auto;
border-collapse: collapse;
}
caption {
background: #ddd;
padding: 10px;
}
.cap-bottom {
caption-side: bottom;
}
td {
text-align: center;
border: solid 2px #ccc;
padding: 5px;
}document.querySelector('button').addEventListener('click', function () {
document.querySelector('caption').classList.toggle('cap-bottom');
}, false);
External CSS
This Pen doesn't use any external CSS resources.