Alignment in Header

Issues with vertical alignment in header

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%;
    font-size: 16px;
    table-layout: fixed;
}
.table thead, .table tbody {
    display: block;
}
.table tbody {
    overflow-y: scroll;
    max-height: 100px;
}
.table tr {
    width: 100%;
    display: table;
}
.table th, .table td {
    width: 25%;
}

JavaScript

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