Alignment in Header

Issues with vertical alignment in header

by B C

HTML

<script src="//netdna.bootstrapcdn.com/bootstrap/3.0.0/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css">
<table class="table">
    <thead>
        <tr>
            <th>
                <a>Short heading</a>
            </th>
            <th>
                <a>Short heading</a>
            </th>
            <th>
                <a>This is a longer heading</a>
            </th>
            <th>
                <a>This is an extremely long heading</a>
            </th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>
                <a>Value</a>
            </td>
            <td>
                <a>Value</a>
            </td>
            <td>
                <a>Value</a>
            </td>
            <td>
                <a>Value</a>
            </td>
        </tr>
        <tr>
            <td>
                <a>Value</a>
            </td>
            <td>
                <a>Value</a>
            </td>
            <td>
                <a>Value</a>
            </td>
            <td>
                <a>Value</a>
            </td>
        </tr>
        <tr>
            <td>
                <a>Value</a>
            </td>
            <td>
                <a>Value</a>
            </td>
            <td>
                <a>Value</a>
            </td>
            <td>
                <a>Value</a>
            </td>
        </tr>
        <tr>
            <td>
                <a>Value</a>
            </td>
            <td>
                <a>Value</a>
            </td>
            <td>
                <a>Value</a>
            </td>
            <td>
                <a>Value</a>
            </td>
        </tr>
        <tr>
            <td>
                <a>Value</a>
            </td>
            <td>
                <a>Value</a>
            </td>
            <td>
                <a>Value</a>
            </td>
            <td>
                <a>Value</a>
            </td>
       ...

CSS

/* Latest compiled and minified CSS included as External Resource*/


/* Optional theme */

@import url('//netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap-theme.min.css');

.table {
    width: 100%;
}
.table,
thead,
tbody,
tr,
th,
td {
    display: block;
}
thead tr {
    width: calc(100% - 17px);
}
tbody {
    overflow-y: scroll;
    max-height: 100px;
}
tr:after {
    content: ' ';
    display: block;
    visibility: hidden;
    clear: both;
}
.table {
    font-size: 16px;
}
th,
td {
    float: left;
    width: 25%;
}

JavaScript

/* Latest compiled and minified JavaScript included as External Resource */