如何为固定标题和可滚动表编写 css

Question

我有表格，我需要固定的标题和可滚动的正文。我做到了，但我有一个边框，所以因为滚动条标题和正文没有对齐。我需要一些帮助来解决这个问题。

这是我的 JSFiddle，

JSFiddle

CSS

    table.tableSection {
    display: table;
    width: 100%;
}
table.tableSection thead, table.tableSection tbody {
    float: left;
    width: 100%;
}
table.tableSection tbody {
    overflow: auto;
    height: 150px;
}
table.tableSection tr {
    width: 100%;
    display: table;
    text-align: left;
}
table.tableSection th, table.tableSection td {
    width: 33%;
border: 1px solid #ccc;
}

请帮帮我。

Answer 1

table.tableSection thead {
    float: left;
    width: 97%;
}

将此添加到您的 css 中

Answer 2

如果您将表格设置为固定大小，则可以将其分成两部分。 标题是 500px，内容是 500px + 滚动条的宽度。

您可以近似它（大约 12 像素），如更新的小提琴 here 所示：

table.tableSection {
    display: table;
    width: 500px;
}
table.tableSection thead, table.tableSection tbody {
    float: left;
    width: 100%;
}
table.tableSection tbody {
    overflow: auto;
    width:512px;
    height: 150px;
}

或使用 Javascript 计算滚动条的大小，并使用 this answer. 上提出的解决方案将其添加到表格宽度

Answer 3

table {
  width: 916px; /* every td or th in thead + 16px for scrollbar */
}

tbody, thead tr{
  display: block;
}

tbody {
  height: 200px;
  overflow-y: auto;
  text-align:center;
}

tbody td, thead th {
   width: 225px;
}

thead th:last-child {
  width: 241px; /* td + 16px for scrollbar */
}

当然你可以给你想要的宽度。

这是我在页面中使用的，效果很好。

Answer 4

首先你需要使用jquery来识别你的表体内容是否有滚动条。接下来，您需要通过计算添加滚动条宽度来切换一个类。所以这是解决方案。

HTML

 <table class="tableSection">
<thead>
    <tr>
        <th><span class="text">album</span>

        </th>
        <th><span class="text">song</span>

        </th>
        <th><span class="text">genre</span>

        </th>
    </tr>
</thead>
<tbody id="mytest">
    <tr>
        <td>td</td>
        <td>td</td>
        <td>td</td>
    </tr>
    <tr>
        <td>td</td>
        <td>td</td>
        <td>td</td>        </tr>
    <tr>
                    <td>td</td>
        <td>td</td>
        <td>td</td>
    </tr>
    <tr>
        <td>td</td>
        <td>td</td>
        <td>td</td>        </tr>
    <tr>
                    <td>td</td>
        <td>td</td>
        <td>td</td>
    </tr>
    <tr>
                    <td>td</td>
        <td>td</td>
        <td>td</td>
    </tr>
    <tr>
                    <td>td</td>
        <td>td</td>
        <td>td</td>
    </tr>
    <tr>
                    <td>td</td>
        <td>td</td>
        <td>td</td>
    </tr>
    <tr>
                    <td>td</td>
        <td>td</td>
        <td>td</td>
    </tr>
    <tr>
                    <td>td</td>
        <td>td</td>
        <td>td</td>
    </tr>
    <tr>
                    <td>td</td>
        <td>td</td>
        <td>td</td>
    </tr>
    <tr>
                    <td>td</td>
        <td>td</td>
        <td>td</td>
    </tr>
    <tr>
                    <td>td</td>
        <td>td</td>
        <td>td</td>
    </tr>
    <tr>
                    <td>td</td>
        <td>td</td>
        <td>td</td>
    </tr>
    <tr>
                    <td>td</td>
        <td>td</td>
        <td>td</td>
    </tr>
    <tr>
                    <td>td</td>
        <td>td</td>
        <td>td</td>
    </tr>
    <tr>
                    <td>td</td>
        <td>td</td>
        <td>td</td>
    </tr>
    <tr>
                    <td>td</td>
        <td>td</td>
        <td>td</td>
    </tr>
    <tr>
                    <td>td</td>
        <td>td</td>
        <td>td</td>
    </tr>
    <tr>
                    <td>td</td>
        <td>td</td>
        <td>td</td>
    </tr>
    <tr>
                    <td>td</td>
        <td>td</td>
        <td>td</td>
    </tr>
</tbody>
</table>

CSS

 table.tableSection {
    display: table;
    width: 100%;
}
table.tableSection thead, table.tableSection tbody {
    float: left;
    width: 100%;
}
table.tableSection tbody {
    overflow: auto;
    height: 150px;    
}
table.tableSection tr {
    width: 100%;
    display: table;
    text-align: left;
}
table.tableSection th, table.tableSection td {
    width: 33%;
border: 1px solid #ccc;
}
.extrawidth{
    width:calc(100% - 18px) !important;
}

JQUERY

(function($) {
$.fn.hasScrollBar = function() {
    return this.get(0).scrollHeight > this.height();
}
})(jQuery);

$(document).ready(function(){    
 if($('#mytest').hasScrollBar())
 {
   $('.tableSection thead').toggleClass('extrawidth');
 }
});

Have a Fiddle Demo