Untitled

dabblet.css

html, body, .container {
    margin: 0;
    height: 100%;
}
table {
    width: 100%;
    border-collapse: collapse;
}
th, td {
    width: 33%;
    padding: 4px;
}

.container {
    display: flex;
    flex-flow: column nowrap;
    line-height: 1.7;
}
.header {
    background-color: gold;
    overflow-y: scroll;
}
.small .header .line-two {
    display: none;
}
.header th {
    border-bottom: solid 1px #999;
}
.header th + th {
    border-left: solid 1px #999;
}
.content {
    background-color: pink;
    flex: 1;
    position: relative;
    overflow-y: scroll;
}
.content .toggle-small {
    position: absolute;
    left: 12px;
    top: 12px;
    padding: 2px;
    background-color: white;
}
.content tr:nth-child(odd) {
    background-color: #eee;
}
.content tr:nth-child(even) {
    background-color: #ddd;
}
.content td + td {
    border-left: solid 1px #999;
}
.content tr + tr td {
    border-top: solid 1px #999;
}

dabblet.html

<div class="container">
    <div class="header">
        <table>
            <tr>
                <th>
                    Line 1
                    <div class="line-two">Line 2</div>
                </th>
                <th>
                    Line 1
                    <div class="line-two">Line 2</div>
                </th>
                <th>
                    Line 1
                    <div class="line-two">Line 2</div>
                </th>
            </tr>
        </table>
    </div>
    <div class="content">
        <a class="toggle-small" href="javascript: document.querySelector('.container').classList.toggle('small');void(0)">toggle</a>
        <table>
            <tr><td>x</td><td>y</td><td>z</td></tr>
            <tr><td>x</td><td>y</td><td>z</td></tr>
            <tr><td>x</td><td>y</td><td>z</td></tr>
            <tr><td>x</td><td>y</td><td>z</td></tr>
            <tr><td>x</td><td>y</td><td>z</td></tr>
            <tr><td>x</td><td>y</td><td>z</td></tr>
            <tr><td>x</td><td>y</td><td>z</td></tr>
            <tr><td>x</td><td>y</td><td>z</td></tr>
            <tr><td>x</td><td>y</td><td>z</td></tr>
            <tr><td>x</td><td>y</td><td>z</td></tr>
            <tr><td>x</td><td>y</td><td>z</td></tr>
            <tr><td>x</td><td>y</td><td>z</td></tr>
            <tr><td>x</td><td>y</td><td>z</td></tr>
            <tr><td>x</td><td>y</td><td>z</td></tr>
            <tr><td>x</td><td>y</td><td>z</td></tr>
            <tr><td>x</td><td>y</td><td>z</td></tr>
            <tr><td>x</td><td>y</td><td>z</td></tr>
            <tr><td>x</td><td>y</td><td>z</td></tr>
            <tr><td>x</td><td>y</td><td>z</td></tr>
            <tr><td>x</td><td>y</td><td>z</td></tr>
            <tr><td>x</td><td>y</td><td>z</td></tr>
        </table>
    </div>
</div>

dabblet.js

// alert('Hello world!');

settings.json

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