<h2>Toggling table-caption with writing-mode set to vertical-rl</h2>

<button>Toggle table-caption position</button>

<table>
  <caption>This is a table caption example</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;
}

h2 {
  text-align: center;
}

button {
  display: block;
  margin: 0 auto 20px;
}

table {
  min-height: 400px;
  min-width: 80%;
  border-collapse: collapse;
  writing-mode: vertical-rl;
}

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.

External JavaScript

This Pen doesn't use any external JavaScript resources.