3

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

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;
}
4

1 回答 1

1

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

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

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

于 2013-03-20T19:47:50.097 回答