在桌子上的水平滚动与固定标头 [英] Horizontal scrolling on table with fixed header

问题描述

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

I have created a fixed header using CSS (mainly just setting the position of the thead to be fixed), but the problem that I run in to is if the user's resolution size or window size is smaller than the tables size, I need to add in a horizontal scroll bar so that they can see everything. i have tried setting overflow to be auto and scroll, but only when I scroll down to the bottom of the page does the scroll bar appear. Also I need to be able to have the thead scroll with the table. Any suggestions on having the horizontal scroll bar appear if the window is smaller than the tables size and how to have the thead still be fixed in one position but still scroll to see more of the thead if the window size is too small?

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中的某些东西在表上产生奇怪的行为，你可以将表包装在

Assuming you're not doing something in Javascript which produces strange behavior on tables, you can just wrap the table in a

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

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

or some other block element with the same style, and you'll get the behavior you seek, including the head and body scrolling along with one another -- see this jsfiddle for a working example.

这篇关于在桌子上的水平滚动与固定标头的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！