10

我正在使用一个高度和宽度可以完全扩展的表格设计。

该表格效果很好，但由于滚动条的宽度，我无法调整或调整表格列上的列名位置。当滚动条可见（并且应该始终可见）时，表格行正在被替换，并且它们的列名看起来很糟糕。

你能给我一些想法吗？

有什么方法可以更改滚动条 z-index 或避免移动行为的方法吗？

这是一个 jsFiddle：在此处查看示例

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%; }
4

2 回答 2

1

好吧，它可以在 Mac 上的 Chrome 中运行（至少这是一个开始。滚动条悬停在内容上而不是取代它）。

就你所拥有的而言，仅使用 CSS 可能无法将这种变化考虑在内。您可能必须使用 Javascript 来查找标题下方的列的宽度，然后相应地调整列标题的宽度。

于 2013-11-12T21:53:16.980 回答
1

如果您想对滚动条进行更多控制，可以使用 jQuery 插件，例如：http ://www.yuiazu.net/perfect-scrollbar/

然而，在你开始之前，你应该阅读正确使用<table>

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

于 2013-11-12T20:48:15.330 回答