Question

我已经使用CSS创建了一个固定的标题（主要是设置要修复的thead的位置），但我遇到的问题是如果用户的分辨率大小或窗口大小小于表大小，我需要添加一个水平滚动条，以便他们可以看到一切。我尝试将溢出设置为自动和滚动，但只有当我向下滚动到页面底部时才会出现滚动条。此外，我需要能够使用表格滚动thead。如果窗口小于表格大小，如何让thead仍然固定在一个位置，但如果窗口尺寸太小仍然滚动以查看更多的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;
}

Answer 1

假设您没有在Javascript中执行某些操作会在表上产生奇怪的行为，您可以将表包装在

中

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

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

在桌子上的水平滚动与固定标头

1 个答案: