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

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

http://jsfiddle.net/E9mqk/1/ 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;
}

假设你没有在 Javascript 中做一些会在表上产生奇怪行为的事情，你可以将表包装在

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

或具有相同样式的其他块元素，您将获得所需的行为，包括头部和身体相互滚动 - 请参阅这个jsfiddle http://jsfiddle.net/BFYbz/一个工作示例。