<h2>caption-side Demo for Firefox-only non-standard values</h2>

<div class="btns">
  <button>left</button>
  <button>right</button>
  <button>top-outside</button>
  <button>bottom-outside</button>
</div>

<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;
}

.btns {
  text-align: center;
  padding: 10px;
}

table {
  min-width: 80%;
  margin: auto;
  border-collapse: collapse;
}

caption {
  background: #ddd;
  padding: 10px;
}

td {
  text-align: center;
  border: solid 2px #ccc;
  padding: 5px;
}
var btns = document.querySelector('.btns').querySelectorAll('button');

for(var i=0;i < btns.length; i++) {
   (function(index) {
     btns[index].addEventListener('click', function(){
       document.querySelector('table').style.captionSide = btns[index].innerHTML;
     });
   })(i);
}

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.