垂直滚动条代替表格行HTML

我正在使用桌面设计,其高度和宽度应该是可扩展的.

表格工作得很好,但是由于滚动条的宽度,我无法调整或适合列列位置.当滚动条可见(并且应该始终可见)时,表行被移动,它们的列名看起来不好.

你能给我一些想法吗？

有没有办法改变滚动条z-index或避免置换行为的东西？

这是一个jsfiddle：See sample here

HTML：

<div id="tablecontainer">
        <div id="topbar">
            <div class="colname cellwidth1">ABC</div>
            <div class="colname cellwidth2">ABC</div>
            <div class="colname cellwidth3">ABC</div>
            <div class="colname cellwidth4">ABC</div>
        </div>
        <div class="breakline"></div>
        <div id="expandtable">
            <div class="divrow">
                <div class="divcell cellwidth1">&nbsp;</div>
                <div class="divcell cellwidth2">&nbsp;</div>
                <div class="divcell cellwidth3">&nbsp;</div>
                <div class="divcell cellwidth4">&nbsp;</div>
            </div>
            <div class="divrow">
                <div class="divcell cellwidth1">&nbsp;</div>
                <div class="divcell cellwidth2">&nbsp;</div>
                <div class="divcell cellwidth3">&nbsp;</div>
                <div class="divcell cellwidth4">&nbsp;</div>
            </div>          
        </div>
        <div class="breakline"></div>
        <div id="topbar">
            <div class="colname cellwidth1">ABC</div>
            <div class="colname cellwidth2">ABC</div>
            <div class="colname cellwidth3">ABC</div>
            <div class="colname cellwidth4">ABC</div>
        </div>
    </div>

CSS：

html,body,#expandtable,#tablecontainer 
{
    height:100%;
    margin: 0;
    padding: 0;
    border: none;
    overflow-y: hidden;
}

#tablecontainer 
{
    width: 100%;
    margin: 0 auto;
    padding-top: 50px;
    max-width: 900px;
}

#expandtable
{
    margin: 5px 0 0 0px;
    overflow-x: hidden;
    overflow-y: scroll;
    height: 60%;
    border-bottom: 0;
    background-color: #eee;
    margin: 0 auto;
}

.breakline { clear:both;}

.divcell 
{ 
    float:left; 
    border: 1px solid #999; 
    Box-sizing: border-Box; 
    min-height: 30px; 
}
.colname 
{ 
    float:left; 
    border: 1px solid #e5e5e5; 
    Box-sizing: border-Box;
}

.cellwidth1 { width:10%; }
.cellwidth2 { width:45%; }
.cellwidth3 { width:35%; }
.cellwidth4 { width:10%; }

解决方法

如果您想要更多地控制滚动条,可以使用jQuery插件,如： http://www.yuiazu.net/perfect-scrollbar/

但是,在您开始之前,您应该正确使用< table>

有关这方面的说明可以在这里找到：http://www.w3schools.com/html/html_tables.asp

原文地址：https://www.jb51.cc/html/224260.html