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

Question

我有一个有时不完整的可滚动表格，如下所示:

这里发生了两件事:背景消失，第 th 列没有对齐。

我正在弄乱我在某处找到的一个演示，我读到显示:table-header-group 实际上将 tbody 与标题对齐，这里的问题是，如果我使用它，则滚动停止工作:这就是我到目前为止:

.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 并不总是被使用，我如何才能将 tbody 与 thead 对齐？当然还要保留卷轴。

这是 fiddle http://jsfiddle.net/CrSpu/4574/

Answer 1

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

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