具有固定标题的表格上的水平滚动

Question

我已经使用 CSS 创建了一个固定的标题（主要只是设置要固定的头的位置），但我遇到的问题是如果用户的分辨率大小或窗口大小小于表格大小，我需要添加一个水平滚动条，以便他们可以看到所有内容。我尝试将溢出设置为自动和滚动，但只有当我向下滚动到页面底部时才会出现滚动条。此外，我需要能够让标题随表格滚动。如果窗口小于表格大小，是否有关于显示水平滚动条的任何建议，以及如何让标题仍然固定在一个位置，但如果窗口尺寸太小，仍然滚动以查看更多标题？

http://jsfiddle.net/E9mqk/1/

HTML 是：

<div class="table-wrapper">
<table id="table-information">
    <colgroup></colgroup>
    <colgroup></colgroup>
    <colgroup></colgroup>
    <colgroup></colgroup>
    <colgroup></colgroup>
    <colgroup></colgroup>
    <colgroup></colgroup>
    <colgroup></colgroup>
    <thead class="table-fixed-header" id="table-data">
        <tr>
            <th>Something 1</th>
            <th>Something 2</th>
            <th>Something 3</th>
            <th>Something 4</th>
            <th>Something 5</th>
            <th>Something 6</th>
            <th>Something 7</th>
            <th>Something 8</th>
        </tr>
    </thead>
    <tbody class="table-body">   
        <tr>
            <td>Data</td>
            <td>Data</td>
            <td>Data</td>
            <td>Data</td>
            <td>Data</td>
            <td>Data</td>
            <td>Data</td>
            <td>Data</td>
        </tr>
        <tr>
            <td>Data</td>
            <td>Data</td>
            <td>Data</td>
            <td>Data</td>
            <td>Data</td>
            <td>Data</td>
            <td>Data</td>
            <td>Data</td>
        </tr>
        <tr>
            <td>Data</td>
            <td>Data</td>
            <td>Data</td>
            <td>Data</td>
            <td>Data</td>
            <td>Data</td>
            <td>Data</td>
            <td>Data</td>
        </tr>
    </tbody>
</table>
</div>

CSS 是：

.table-wrapper {
    overflow-x: scroll;
}
.table-fixed-header {
    position: fixed;
}
#table-information tbody:before {
    line-height: 30px;
    content:"-";
    color:white; /* to hide text */
    display:block;
}
#table-information td {
    max-width: 100px;
    min-width: 100px;
}
#table-information th {
    max-width: 100px;
    min-width: 100px;
}

Answer 1

假设你没有在 Javascript 中做一些会在表格上产生奇怪行为的东西，你可以把表格包装在一个

 <div style="overflow-x: scroll;">
   [your table here]
 </div>

或其他具有相同样式的块元素，您将获得您所寻求的行为，包括头部和身体相互滚动 - 请参阅 this jsfiddle 以获取工作示例。