body {
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    color: #666;
    padding: 5px 20px;
}

h2 {
    margin-top: 20px;
}


/* TABLE */

.table-wrapper {
    overflow: scroll;
    max-width: 700px;
    max-height: 200px;
    margin: 10px auto;
}

table.budget {
    margin: 0;
    border-collapse: collapse;
}
    table.budget th,
    table.budget td
    {
        background-color: #eee;
        border: solid 1px #fff;
        padding: 3px 5px;
        text-align: center;
        white-space: nowrap;
    }

    table.budget td:first-child, th:first-child {
        border-right: solid 1px;
        box-shadow: inset 1px 0 0 #000000, inset -1px 0 0 #000000;
        color: #339;
        background-color: #ccc;
        font-weight: bold;
    }
    table.budget th {
        box-shadow: inset 0 1px 0 #000000, inset 0 -1px 0 #000000;
        color: #fff;
        background-color: #339;
        position: relative;
        z-index: 101;
    }

pre.code {
    float: right;
    margin: 0 0 10px 10px;
    font-size: 11px;
}


/* PURE CSS STICKY TABLE */

.purecss table.budget td:first-child, 
.purecss th:first-child,
.purecss table.budget th {
    position: -webkit-sticky;
    position: sticky;
    z-index: 100;
    left: 0;
}
.purecss table.budget th {
    z-index: 101;
    top: 0;
}