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

debugcn 发表于 Dev

用户名

我有桌子，我需要固定的页眉和可滚动的正文。我做到了，但是我有一个边框，因为滚动条标题和正文未对齐。我需要一些帮助来解决此问题。

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

请帮助我。

苏雷什·庞卡莱（Suresh Ponnukalai）

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

进行小提琴演示

本文收集自互联网，转载请注明来源。

如有侵权，请联系[email protected] 删除。