scrolling table ? , nop, tbody maybe :)

dabblet.css

/* scrolling table ? , nop, tbody maybe :) */

table {
table-layout:fixed;
width:80%;
min-width:600px;
margin:3em auto;
text-align:center;
display:block;border-spacing:0;
background:yellow;
border:solid 1px;
padding:0 0 1.05em 1.05em;
}
thead,tfoot , tr ,caption{display:table;width:100%;table-layout:fixed;}
thead,tfoot {box-sizing:border-box;padding-right:0.85em;position:relative;}
thead tr th, tfoot tr td {background:#159;color:#ddd;}
caption, thead, tfoot {
font-variant:small-caps;font-size:120%;text-shadow:1px 1px 1px #000,-1px 0px 1px #ccc;}
th:first-child, td:first-child {width:45%;}
th, td {border:solid 1px black;padding:10px;}
tbody {display:block;height:200px; overflow:auto;background:#def;}

dabblet.html

<table>
<caption>Scrolling table</caption>
<thead><tr><th> header</th><th> header</th><th> header</th><th> header</th></tr></thead>
<tbody>
<tr><td> Cell </td><td> Cell </td><td> Cell </td><td> Cell </td></tr>
<tr><td> Cell </td><td> Cell </td><td> Cell </td><td> Cell </td></tr>
<tr><td> Cell </td><td> Cell </td><td> Cell </td><td> Cell </td></tr>
<tr><td> Cell </td><td> Cell </td><td> Cell </td><td> Cell </td></tr>
<tr><td> Cell </td><td> Cell </td><td> Cell </td><td> Cell </td></tr>
<tr><td> Cell </td><td> Cell </td><td> Cell </td><td> Cell </td></tr>
<tr><td> Cell </td><td> Cell </td><td> Cell </td><td> Cell </td></tr>
<tr><td> Cell </td><td> Cell </td><td> Cell </td><td> Cell </td></tr>
<tr><td> Cell </td><td> Cell </td><td> Cell </td><td> Cell </td></tr>
<tr><td> Cell </td><td> Cell </td><td> Cell </td><td> Cell </td></tr>
<tr><td> Cell </td><td> Cell </td><td> Cell </td><td> Cell </td></tr>
<tr><td> Cell </td><td> Cell </td><td> Cell </td><td> Cell </td></tr>
<tr><td> Cell </td><td> Cell </td><td> Cell </td><td> Cell </td></tr>
<tr><td> Cell </td><td> Cell </td><td> Cell </td><td> Cell </td></tr>
<tr><td> Cell </td><td> Cell </td><td> Cell </td><td> Cell </td></tr>
<tr><td> Cell </td><td> Cell </td><td> Cell </td><td> Cell </td></tr>
<tr><td> Cell </td><td> Cell </td><td> Cell </td><td> Cell </td></tr>
<tr><td> Cell </td><td> Cell </td><td> Cell </td><td> Cell </td></tr>
<tr><td> Cell </td><td> Cell </td><td> Cell </td><td> Cell </td></tr>
<tr><td> Cell </td><td> Cell </td><td> Cell </td><td> Cell </td></tr>
<tr><td> Cell </td><td> Cell </td><td> Cell </td><td> Cell </td></tr>
<tr><td> Cell </td><td> Cell </td><td> Cell </td><td> Cell </td></tr>
<tr><td> Cell </td><td> Cell </td><td> Cell </td><td> Cell </td></tr>
<tr><td> Cell </td><td> Cell </td><td> Cell </td><td> Cell </td></tr>
<tr><td><input type="checkbox"  autofocus/>  Cell </td><td> Cell </td><td> Cell </td><td> Cell </td></tr>
<tr><td> Cell </td><td> Cell </td><td> Cell </td><td> Cell </td></tr>
<tr><td> Cell </td><td> Cell </td><td> Cell </td><td> Cell </td></tr>
<tr><td> Cell </td><td> Cell </td><td> Cell </td><td> Cell </td></tr>
<tr><td> Cell </td><td> Cell </td><td> Cell </td><td> Cell </td></tr>
<tr><td> Cell </td><td> Cell </td><td> Cell </td><td> Cell </td></tr>
<tr><td> Cell </td><td> Cell </td><td> Cell </td><td> Cell </td></tr>
<tr><td> Cell </td><td> Cell </td><td> Cell </td><td> Cell </td></tr>
</tbody>
<tfoot><tr><td> Footer </td><td> Footer </td><td> Footer </td><td> Footer </td></tr></tfoot>
</table>

dabblet.js

// alert('Hello world!');

settings.json

{"view":"separate","fontsize":"100","seethrough":"","prefixfree":"1","page":"all"}