这是一个内容可滚动表的实现，仅使用div元素和纯CSS Flexbox样式实现。

.table { display: flex; flex-direction: column; background-color: lightblue; width: 600px; height: 200px; font-family: "Courier New"; } .header { display: flex; flex-direction: row; background-color: whitesmoke; padding-right: 10px; font-weight: bold; } .row { border-bottom: 1px solid gainsboro; } .row>div { width: 25%; text-align: left; } .content { height: 100%; display: flex; flex-direction: column; overflow-y: scroll; } .entry { display: flex; flex-direction: row; padding-top: 5px; } /* Chrome, Edge, Safari and Opera support the non-standard ::-webkit-scrollbar pseudo element. We need the scroll bar width set so as to apply same padding in the table header row for alignment. */ /* width */ ::-webkit-scrollbar { width: 10px; } /* Track */ ::-webkit-scrollbar-track { background: whitesmoke; border-radius: 2px; } /* Handle */ ::-webkit-scrollbar-thumb { background: lightgrey; border-radius: 2px; } /* Handle on hover */ ::-webkit-scrollbar-thumb:hover { background: grey; } <div class="table"> <div class="header row"> <div>Fruit</div> <div>Price</div> <div>Quantity</div> <div>In Stock</div> </div> <div class="content"> <div class="entry row"> <div>Apple</div> <div>$10</div> <div>100</div> <div>Yes</div> </div> <div class="entry row"> <div>Pear</div> <div>$2</div> <div>900</div> <div>No</div> </div> <div class="entry row"> <div>Orange</div> <div>$3</div> <div>123400</div> <div>Yes</div> </div> <div class="entry row"> <div>Mongosteen</div> <div>$80</div> <div>5</div> <div>Yes</div> </div> <div class="entry row"> <div>Durian</div> <div>$120</div> <div>988</div> <div>Yes</div> </div> <div class="entry row"> <div>Apple</div> <div>$10</div> <div>100</div> <div>Yes</div> </div> <div class="entry row"> <div>Pear</div> <div>$2</div> <div>900</div> <div>No</div> </div> <div class="entry row"> <div>Orange</div> <div>$3</div> <div>123400</div> <div>Yes</div> </div> <div class="entry row"> <div>Mongosteen</div> <div>$80</div> <div>5</div> <div>Yes</div> </div> <div class="entry row"> <div>Durian</div> <div>$120</div> <div>988</div> <div>Yes</div> </div> </div> </div>

See the Pen

内容可滚动表-仅CSS

by Ruifeng Ma (

@maruifeng

) on

CodePen

.

您可以放置两个div，其中第一个div(标题)将有透明的滚动条和第二个div将有数据与可见/自动滚动条。示例中有用于遍历数据的角代码片段。

下面的代码为我工作-

<div id="transparentScrollbarDiv" class="container-fluid" style="overflow-y: scroll;">
    <div class="row">
        <div class="col-lg-3 col-xs-3"><strong>{{col1}}</strong></div>
        <div class="col-lg-6 col-xs-6"><strong>{{col2}}</strong></div>
        <div class="col-lg-3 col-xs-3"><strong>{{col3}}</strong></div>
    </div>
</div>
<div class="container-fluid" style="height: 150px; overflow-y: auto">
    <div>
        <div class="row" ng-repeat="row in rows">
            <div class="col-lg-3 col-xs-3">{{row.col1}}</div>
            <div class="col-lg-6 col-xs-6">{{row.col2}}</div>
            <div class="col-lg-3 col-xs-3">{{row.col3}}</div>
        </div>
    </div>
</div>

隐藏标题滚动条的附加样式

<style>
        #transparentScrollbarDiv::-webkit-scrollbar {
            width: inherit;
        }

        /* this targets the default scrollbar (compulsory) */

        #transparentScrollbarDiv::-webkit-scrollbar-track {
            background-color: transparent;
        }

        /* the new scrollbar will have a flat appearance with the set background color */

        #transparentScrollbarDiv::-webkit-scrollbar-thumb {
            background-color: transparent;
        }

        /* this will style the thumb, ignoring the track */

        #transparentScrollbarDiv::-webkit-scrollbar-button {
            background-color: transparent;
        }

        /* optionally, you can style the top and the bottom buttons (left and right for horizontal bars) */

        #transparentScrollbarDiv::-webkit-scrollbar-corner {
            background-color: transparent;
        }

        /* if both the vertical and the horizontal bars appear, then perhaps the right bottom corner also needs to be styled */
    </style>

不管它现在有什么价值:我确实发布了一个解决方案的姐妹线程表滚动与HTML和CSS

接受两个表(一个仅用于头部，一个用于所有-由浏览器布局) 摆放完毕后，将上桌(仅限人头)调整到下桌的宽度 隐藏(可见性，而不是显示)下表的标题，并使下表在div中可滚动w/

解决方案是不可知的任何风格/框架使用-所以它可能在这里也是有用的…

一个很长的描述是在表格滚动与HTML和CSS /代码也是在这支笔:https://codepen.io/sebredhh/pen/QmJvKy

既然“所有”浏览器都支持ES6，我已经将上面的各种建议合并到一个JavaScript类中，该类以表作为参数，并使主体可滚动。它让浏览器的布局引擎确定标题和主体单元格的宽度，然后使列的宽度相互匹配。

可以显式地设置表的高度，或者填充浏览器窗口的剩余部分，并提供事件的回调，如视口调整大小和/或细节元素打开或关闭。

多行标头支持是可用的，如果表使用WCAC指南中指定的id/headers属性作为可访问性，这是特别有效的，这并不像看起来那样是一个繁重的要求。

代码不依赖于任何库，但如果使用它们，则可以很好地使用它们。(在使用JQuery的页面上测试)。

代码和示例用法可以在Github上找到。

你应该尝试使用"display:block;"到tbody，因为现在它是内联块，为了设置高度，元素应该是"block"

我在让stickytableheaders库工作时遇到了很多麻烦。做了更多的搜索，我发现floatThead是一个积极维护的替代方案，具有最近的更新和更好的文档。