无法在滚动表中对齐thead和tbody

Question

我有一个可滚动的表，有时它并不满，像这样：

这里发生2件事情：背景消失，第th列不对齐。

我在弄乱我在某个地方找到的演示的过程，然后阅读该显示内容：table-header-group实际上将tbody与header对齐，这里的问题是，如果我使用它，则滚动将停止工作：这就是我到目前为止的内容：

.scroll {
    /* Optional */
    /* border-collapse: collapse; */
    border-spacing: 0;
    font-family: Raleway;
    padding-top: 15px;
    padding-left: 15px;
    border-collapse: collapse;
    color: #005693;
    border-radius: 10px;
    font-size: 12px;
    text-align: center;
}
.scroll tbody, .scroll thead {
    display:block;

}
thead tr th {
    height: 30px;
    line-height: 30px;
    /* text-align: left; */
}
.scroll tbody {
    height: 100px;
    overflow-y: auto;
    overflow-x: hidden;
}
.scroll tbody {
    border-top: 2px solid black;
}
.scroll tbody td, thead th {
    /* width: 20%; */
    /* Optional */
    border-right: 1px solid black;
    /* white-space: nowrap; */
}
.scroll tbody td:last-child, thead th:last-child {
    border-right: none;
}

<table class="scroll">
    <thead>
        <tr>
            <th>Job</th>
            <th>Client ID</th>
            <th>Company</th>
            <th>Representative</th>
            <th>Status</th>
            <th>Report</th>
            <th>Recieved</th>
            <th>Delivered</th>
            <th>Quotation</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>Content 1</td>
            <td>Content 2</td>
            <td>Content 3</td>
            <td>Content 4</td>
            <td>Content 5</td>
            <td>Content 6</td>
            <td>Content 7</td>
            <td>Content 8</td>
            <td></td>
        </tr>
        <tr>
            <td>Content 1</td>
            <td>Content 2</td>
            <td>Content 3</td>
            <td>Content 4</td>
            <td>Content 5</td>
            <td>Content 6</td>
            <td>Content 7</td>
            <td>Content 8</td>
            <td></td>
        </tr>
        <tr>
            <td>Content 1</td>
            <td>Content 2</td>
            <td>Content 3</td>
            <td>Content 4</td>
            <td>Content 5</td>
            <td>Content 6</td>
            <td>Content 7</td>
            <td>Content 8</td>
            <td></td>
        </tr>
        <tr>
            <td>Content 1</td>
            <td>Content 2</td>
            <td>Content 3</td>
            <td>Content 4</td>
            <td>Content 5</td>
            <td>Content 6</td>
            <td>Content 7</td>
            <td></td>
            <td></td>
        </tr>
        <tr>
            <td>Content 1</td>
            <td>Content 2</td>
            <td>Content 3</td>
            <td>Content 4</td>
            <td>Content 5</td>
            <td>Content 6</td>
            <td>Content 7</td>
            <td></td>
            <td></td>
        </tr>
        <tr>
            <td>Content 1</td>
            <td>Content 2</td>
            <td>Content 3</td>
            <td>Content 4</td>
            <td>Content 5</td>
            <td>Content 6</td>
            <td>Content 7</td>
            <td></td>
            <td></td>
        </tr>
        <tr>
            <td>Content 1</td>
            <td>Content 2</td>
            <td>Content 3</td>
            <td>Content 4</td>
            <td>Content 5</td>
            <td>Content 6</td>
            <td>Content 7</td>
            <td></td>
            <td></td>
        </tr>
    </tbody>
</table>

考虑到内容8和9并不总是使用，我如何将主题与thead对齐？当然也要保持滚动。

这是小提琴http://jsfiddle.net/CrSpu/4574/

Answer 1

如果有人遇到同样的问题，我找到了一个很好的解决方案，这里有一个小提琴。如果你想添加行，只需继续添加 +td css 和你喜欢的尺寸：D

http://jsbin.com/bagaro/1/edit?html,输出