更新

对于更新的和仍然维护的库尝试jquery。而不是floatThead(正如Bob Jordan在评论中提到的)。

旧的答案

这是一个很古老的答案，下面提到的图书馆已经不再维护了。

我在GitHub上使用StickyTableHeaders，它像魅力一样工作!

我必须添加这个css，使头部不透明。

table#stickyHeader thead {
  border-top: none;
  border-bottom: none;
  background-color: #FFF;
}

您可以放置两个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>

刚发现一个很酷的解决方案使用网格! 这是我用过的，效果很好:

tbody tr, thead tr {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr 1fr; // or whatever division you wanna do
}

tbody {
  height: 300px; // or whatever height
  width: 100%;
  overflow-y: auto;
  display: block;
}

演示: https://codesandbox.io/s/table-with-inner-body-scroll-hggq7x

使用css更容易

table tbody { display:block; max-height:450px; overflow-y:scroll; }
table thead, table tbody tr { display:table; width:100%; table-layout:fixed; }

这是一个内容可滚动表的实现，仅使用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

.

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

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

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

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

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