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

Question

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

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

我正在搞乱我在某个地方发现的一个演示并且我读了那个显示：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>

如何将tbody与thead对齐，因为内容8和9并不总是被使用？当然还要保留卷轴。

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

Answer 1

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

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