在制作可滚动的表格时，首先要做得太宽

Question

<div class="scrollable">
    <table>
        <thead>
            <tr>
                <th class="nothing_here">Nothing here</th>
                <th>Tora Gargano</th>
                <th>Emory Beck</th>
                <th>Jane Doe</th>
                <th>Yoshiko Beekman</th>
                <th>Treasa Norris</th>
                <th>Jane Doe</th>
            </tr>
        </thead>
        <tbody>
            <tr>
                <th>Actions</th>
                <td>blah</td>
                <td>blah</td>
                <td>blah</td>
                <td>blah</td>
                <td>blah</td>
                <td>blah</td>
            </tr>
            <tr>
                <th>Status</th>
                <td>Pending</td>
                <td>Done</td>
                <td>Pending</td>
                <td>Pending</td>
                <td>Done</td>
                <td>Pending</td>
            </tr>
            <tr>
                <th>Actions</th>
                <td>blah</td>
                <td>blah</td>
                <td>blah</td>
                <td>blah</td>
                <td>blah</td>
                <td>blah</td>
            </tr>
            <tr>
                <th>Status</th>
                <td>Pending</td>
                <td>Done</td>
                <td>Pending</td>
                <td>Pending</td>
                <td>Done</td>
                <td>Pending</td>
            </tr>
        </tbody>
    </table>
</div>

thead元素中的名称与下面的值没有正确对齐。 th元素的第一个孩子占用了所有可用空间。

以下是我的问题jsfiddle的链接http://jsfiddle.net/zLc48uga/有什么想法吗？

Answer 1

如果从css中删除“display：block”，所有这些都排好了。你是这个意思吗？该表需要显示：table-cell，否则磁头不能与数据对齐。

<强> 修改

对不起，我误解了。也可以向你的thead添加显示块。

.scrollable thead {
display: block;
}

Answer 2

此问题的解决方案是将thead元素设为block元素。

要实现此目的，您需要应用以下CSS：

.scrollable thead {
    display: block;
}

DEMO： http://jsfiddle.net/pwee167/zLc48uga/2/

Answer 3

我认为您尝试做的是设置标题固定，并使主体可滚动。

有几种方法可以做到这一点，但这并不是一个好方法。 一种方式，跨浏览器，可以使用两个不同的表：一个用于头部，另一个用于身体，并将身体表放在固定高度div中。

例如：

    <table>
        <tr>
            <th class="nothing_here">Nothing here</th>
            <th>Tora Gargano</th>
            <th>Emory Beck</th>
            <th>Jane Doe</th>
            <th>Yoshiko Beekman</th>
            <th>Treasa Norris</th>
            <th>Jane Doe</th>
        </tr>
    </table>
    <div class="scrollable">
       <table>
         <tr>
             <th>Actions</th>
             <td>blah</td>
             <td>blah</td>
             <td>blah</td>
             <td>blah</td>
             <td>blah</td>
             <td>blah</td>
         </tr>
         <tr>
             <th>Actions</th>
             <td>blah</td>
             <td>blah</td>
             <td>blah</td>
             <td>blah</td>
             <td>blah</td>
             <td>blah</td>
         </tr>
         <tr>
             <th>Actions</th>
             <td>blah</td>
             <td>blah</td>
             <td>blah</td>
             <td>blah</td>
             <td>blah</td>
             <td>blah</td>
         </tr>
       </table>
    </div>

您可以在此处找到该案例的演示：Demo

我建议您使用DataTables，这是一个使用javascript的简单明了的解决方案。

Answer 4

如果你真的想要将该表拆开以添加滚动，那么你可以这样做：

＆＃13;

＆＃13;

html {
    overflow-y:hidden;
}
.scrollable thead tr {
    position: relative;
    display: block;
}
.scrollable thead th {
    position: relative;
    display: inline-block;
    margin-left: 6px;
}
.scrollable tbody {
    display: block;
    height: 100px;
    overflow-y: scroll;
}
.scrollable tbody td, .scrollable tbody th {
    position: relative;
    text-align: center;
    width: 80px;
}

＆＃13;

<div class="scrollable">
    <table>
        <thead>
            <tr>
                <th class="nothing_here">Nothing here</th>
                <th>Tora Gargano</th>
                <th>Emory Beck</th>
                <th>Jane Doe</th>
                <th>Yoshiko Beekman</th>
                <th>Treasa Norris</th>
                <th>Jane Doe</th>
            </tr>
        </thead>
        <tbody>
            <tr>
                <th>Actions</th>
                <td>blah</td>
                <td>blah</td>
                <td>blah</td>
                <td>blah</td>
                <td>blah</td>
                <td>blah</td>
            </tr>
            <tr>
                <th>Status</th>
                <td>Pending</td>
                <td>Done</td>
                <td>Pending</td>
                <td>Pending</td>
                <td>Done</td>
                <td>Pending</td>
            </tr>
            <tr>
                <th>Actions</th>
                <td>blah</td>
                <td>blah</td>
                <td>blah</td>
                <td>blah</td>
                <td>blah</td>
                <td>blah</td>
            </tr>
            <tr>
                <th>Status</th>
                <td>Pending</td>
                <td>Done</td>
                <td>Pending</td>
                <td>Pending</td>
                <td>Done</td>
                <td>Pending</td>
            </tr>
            <tr>
                <th>Actions</th>
                <td>blah</td>
                <td>blah</td>
                <td>blah</td>
                <td>blah</td>
                <td>blah</td>
                <td>blah</td>
            </tr>
            <tr>
                <th>Status</th>
                <td>Pending</td>
                <td>Done</td>
                <td>Pending</td>
                <td>Pending</td>
                <td>Done</td>
                <td>Pending</td>
            </tr>
            <tr>
                <th>Actions</th>
                <td>blah</td>
                <td>blah</td>
                <td>blah</td>
                <td>blah</td>
                <td>blah</td>
                <td>blah</td>
            </tr>
            <tr>
                <th>Status</th>
                <td>Pending</td>
                <td>Done</td>
                <td>Pending</td>
                <td>Pending</td>
                <td>Done</td>
                <td>Pending</td>
            </tr>
        </tbody>
    </table>
</div>

＆＃13;

＆＃13;

＆＃13;