我正在使用桌面设计,其高度和宽度应该是完全可扩展的。
该表运行良好,但由于滚动条宽度,我无法调整或调整表列上的列名称位置。当滚动条可见时(并且它应该始终可见),表行正在被移位,并且它们的列名称看起来很糟糕。
你能告诉我一些想法吗?有没有办法更改滚动条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"> </div>
<div class="divcell cellwidth2"> </div>
<div class="divcell cellwidth3"> </div>
<div class="divcell cellwidth4"> </div>
</div>
<div class="divrow">
<div class="divcell cellwidth1"> </div>
<div class="divcell cellwidth2"> </div>
<div class="divcell cellwidth3"> </div>
<div class="divcell cellwidth4"> </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%; }
答案 0 :(得分:1)
如果您想要更多地控制滚动条,可以使用如下的jQuery插件:http://www.yuiazu.net/perfect-scrollbar/
但是,在开始之前,您应该阅读<table>
答案 1 :(得分:1)
它适用于Mac上的Chrome(至少它是一个开始。滚动条悬停在内容上而不是取代它)。
有了你所拥有的东西,就可能无法用CSS来改变这种变化。您可能必须使用Javascript来查找标题下方列的宽度,然后相应地调整列标题的宽度。