Question

我有桌子，我需要固定标题和滚动身体。我做了它，但我有一个边框，所以因为滚动条标题和身体没有对齐。我需要一些帮助来解决这个问题。

这是我的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

首先，您需要使用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

Answer 2

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

将此添加到您的css

Answer 3

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

你可以近似它（约12px），可以在更新的小提琴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 4

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 */
}

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

这是我用于页面的内容，效果很好。

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

4 个答案: