文章/答案/技术大牛

发布

社区首页 >问答首页 >垂直滚动条替换表行HTML

问垂直滚动条替换表行HTML
EN

Stack Overflow用户

提问于 2013-11-13 04:19:47

回答 2查看 1.6K关注 0票数 10

我正在与一个表格设计，应该有它的高度和宽度完全可扩展。

表格运行良好，但由于滚动条太宽，我无法调整或调整表格列上的列名位置。当滚动条可见(并且应该始终可见)时，表中的行将被替换，并且它们的列名看起来很糟糕。

你能给我一些想法吗？

有没有办法改变滚动条的z索引，或者避免移位行为？

这是一个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%; }

html

css

回答 2

Stack Overflow用户

发布于 2013-11-13 04:48:15

如果你想对滚动条有更多的控制，你可以使用一个这样的jQuery插件：http://www.yuiazu.net/perfect-scrollbar/

但是，在开始之前，您应该先阅读<table>的正确用法

有关此操作的说明可在此处找到：http://www.w3schools.com/html/html_tables.asp

票数 1

Stack Overflow用户

发布于 2013-11-13 05:53:17

它可以在Mac上的Chrome上运行(至少这是一个开始。滚动条悬停在内容上，而不是移动它)。

根据您已有的内容，可能无法仅使用CSS来进行此更改。您可能需要使用Javascript来查找标题下面的列的宽度，然后相应地调整列标题的宽度。

票数 1

页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持

原文链接：

https://stackoverflow.com/questions/19939085

复制

相似问题

问垂直滚动条替换表行HTML
EN

回答 2

Stack Overflow用户

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问垂直滚动条替换表行HTMLEN

回答 2

Stack Overflow用户

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问垂直滚动条替换表行HTML
EN