关键词：
【中文标题】具有固定位置和可滚动表数据元素的 HTML 表头【英文标题】：HTML Table Header with Fixed Position and scroll able table data elements 【发布时间】：2017-03-26 17:57:13 【问题描述】：这个问题的主要目的是固定表格标题，当我们垂直滚动时，只有元素应该滚动并且表格标题应该在同一位置
我希望这样做 无需手动固定表头的宽度，因为我的列标题宽度取决于 td 元素。我看到一些问题，其中使用手动固定宽度找到了解决方案表头。
有人可以通过使用相同的 CSS 类名来帮助我解决这个问题
下面是我的桌子的Demo。
Demo Of the Table
我在上表中使用的 CSS
.wrapper
overflow : auto;
width: 1350px;
max-height : 250px;
white-space: nowrap;
padding-bottom : 10px;
padding-top : 10px;
.professional .title
padding-top: 10px;
backgrounionad: #2980b9;
td
white-space: nowrap;
border-style: solid;
padding: 8px;
border-right-color: #ff0000;
th
position:auto;
text-align: center;
-webkit-border-radius: 10px;
-moz-border-radius: 10px;
border-radius: 10px;
width : auto;
height : word-spacing;
white-space: nowrap;
.table
width: auto;
max-width: auto;
margin-bottom: 20px;
.tableheader
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
border-radius: 5px;
font-size: 1.3rem;
border-radius: 5px;
text-transform: capitalize;
position: relative;
padding: 10px 25px 10px 25px;
【问题讨论】：
如果您对 jquery 解决方案持开放态度，这应该会有所帮助。 codepen.io/jgx/pen/wiIGc 谢谢，但我试过我需要修复我的 css 才能使用 jquery。 【参考方案1】：您可以做的，不是使用表格行作为标题，而是创建一个 <div> 元素并将其设置为位于屏幕顶部
#tableheader
position:fixed;
top:0;
width:100%;
z-index:100;
然后你可以在它下面放一个表格元素。
<div id="tableheader">
Table title
</div>
<table>
<tr>
<td>Data</td>
<td>More Data</td>
</tr>
</table>
【讨论】：
这对我不起作用，你能帮我在演示中编辑我的 CSS【参考方案2】：你可以这样做：
将第一行放入<thead></thead> 并添加css position:fixed;
将表格的其余部分放入<tbody></tbody> 并添加css top: 3em; position:relative;
top 的值取决于您的字体大小。
如果您没有水平滚动条，这将起作用。
.wrapper
overflow: auto;
width: 1350px;
max-height: 250px;
white-space: nowrap;
padding-bottom: 10px;
padding-top: 10px;
.professional .title
padding-top: 10px;
background: #2980b9;
td
white-space: nowrap;
border-style: solid;
padding: 8px;
border-right-color: #ff0000;
th
position: auto;
text-align: center;
-webkit-border-radius: 10px;
-moz-border-radius: 10px;
border-radius: 10px;
width: auto;
height: word-spacing;
white-space: nowrap;
.table
width: auto;
max-width: auto;
margin-bottom: 20px;
.tableheader
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
border-radius: 5px;
font-size: 1.3rem;
border-radius: 5px;
text-transform: capitalize;
position: relative;
padding: 10px 25px 10px 25px;
tbody
top:3em;
position:relative;
thead
position:fixed;
<link rel="stylesheet" href="style.css" />
<body>
Scrollable Table
<div class="wrapper">
<table class="professional">
<thead>
<tr>
<th class="tableheader">Message ID</th>
<th class="tableheader">Operation</th>
<th class="tableheader">Status</th>
<th class="tableheader">Send Time</th>
<th class="tableheader">Receive Time</th>
<th class="tableheader">Send Data</th>
<th class="tableheader">Receive Data</th>
</tr>
</thead>
<tbody>
<!-- ngRepeat: list in opMessageLogs -->
<tr class="features ng-scope" ng-repeat="list in opMessageLogs">
<td class="ng-binding">58231e66982cf7857fee2cb5</td>
<td class="ng-binding">Operation1</td>
<td class="ng-binding">SUCCESS</td>
<td class="ng-binding">null</td>
<td class="ng-binding">2016-11-09 18:32:30</td>
<td ng-click="showText(list.REQUEST,$index)">Request</td>
<td ng-click="showText(list.RESPONSE,$index)">Response</td>
</tr>
<!-- end ngRepeat: list in opMessageLogs -->
<tr class="features ng-scope" ng-repeat="list in opMessageLogs">
<td class="ng-binding">58231e681b58b970137b56aa</td>
<td class="ng-binding">Operation2</td>
<td class="ng-binding">SUCCESS</td>
<td class="ng-binding">2016-11-09 18:32:32</td>
<td class="ng-binding">2016-11-09 18:32:32</td>
<td ng-click="showText(list.REQUEST,$index)">Request</td>
<td ng-click="showText(list.RESPONSE,$index)">Response</td>
</tr>
<!-- end ngRepeat: list in opMessageLogs -->
<tr class="features ng-scope" ng-repeat="list in opMessageLogs">
<td class="ng-binding">58231e691b58b970137b56ab</td>
<td class="ng-binding">Operation3</td>
<td class="ng-binding">SUCCESS</td>
<td class="ng-binding">2016-11-09 18:32:33</td>
<td class="ng-binding">2016-11-09 18:32:33</td>
<td ng-click="showText(list.REQUEST,$index)">Request</td>
<td ng-click="showText(list.RESPONSE,$index)">Response</td>
</tr>
<tr class="features ng-scope" ng-repeat="list in opMessageLogs">
<td class="ng-binding">58231e691b58b970137b56ab</td>
<td class="ng-binding">Operation3</td>
<td class="ng-binding">SUCCESS</td>
<td class="ng-binding">2016-11-09 18:32:33</td>
<td class="ng-binding">2016-11-09 18:32:33</td>
<td ng-click="showText(list.REQUEST,$index)">Request</td>
<td ng-click="showText(list.RESPONSE,$index)">Response</td>
</tr>
<tr class="features ng-scope" ng-repeat="list in opMessageLogs">
<td class="ng-binding">58231e691b58b970137b56ab</td>
<td class="ng-binding">Operation3</td>
<td class="ng-binding">SUCCESS</td>
<td class="ng-binding">2016-11-09 18:32:33</td>
<td class="ng-binding">2016-11-09 18:32:33</td>
<td ng-click="showText(list.REQUEST,$index)">Request</td>
<td ng-click="showText(list.RESPONSE,$index)">Response</td>
</tr>
<tr class="features ng-scope" ng-repeat="list in opMessageLogs">
<td class="ng-binding">58231e691b58b970137b56ab</td>
<td class="ng-binding">Operation3</td>
<td class="ng-binding">SUCCESS</td>
<td class="ng-binding">2016-11-09 18:32:33</td>
<td class="ng-binding">2016-11-09 18:32:33</td>
<td ng-click="showText(list.REQUEST,$index)">Request</td>
<td ng-click="showText(list.RESPONSE,$index)">Response</td>
</tr>
<tr class="features ng-scope" ng-repeat="list in opMessageLogs">
<td class="ng-binding">58231e691b58b970137b56ab</td>
<td class="ng-binding">Operation3</td>
<td class="ng-binding">SUCCESS</td>
<td class="ng-binding">2016-11-09 18:32:33</td>
<td class="ng-binding">2016-11-09 18:32:33</td>
<td ng-click="showText(list.REQUEST,$index)">Request</td>
<td ng-click="showText(list.RESPONSE,$index)">Response</td>
</tr>
<tr class="features ng-scope" ng-repeat="list in opMessageLogs">
<td class="ng-binding">58231e691b58b970137b56ab</td>
<td class="ng-binding">Operation3</td>
<td class="ng-binding">SUCCESS</td>
<td class="ng-binding">2016-11-09 18:32:33</td>
<td class="ng-binding">2016-11-09 18:32:33</td>
<td ng-click="showText(list.REQUEST,$index)">Request</td>
<td ng-click="showText(list.RESPONSE,$index)">Response</td>
</tr>
<tr class="features ng-scope" ng-repeat="list in opMessageLogs">
<td class="ng-binding">58231e691b58b970137b56ab</td>
<td class="ng-binding">Operation3</td>
<td class="ng-binding">SUCCESS</td>
<td class="ng-binding">2016-11-09 18:32:33</td>
<td class="ng-binding">2016-11-09 18:32:33</td>
<td ng-click="showText(list.REQUEST,$index)">Request</td>
<td ng-click="showText(list.RESPONSE,$index)">Response</td>
</tr>
<tr class="features ng-scope" ng-repeat="list in opMessageLogs">
<td class="ng-binding">58231e691b58b970137b56ab</td>
<td class="ng-binding">Operation3</td>
<td class="ng-binding">SUCCESS</td>
<td class="ng-binding">2016-11-09 18:32:33</td>
<td class="ng-binding">2016-11-09 18:32:33</td>
<td ng-click="showText(list.REQUEST,$index)">Request</td>
<td ng-click="showText(list.RESPONSE,$index)">Response</td>
</tr>
<tr class="features ng-scope" ng-repeat="list in opMessageLogs">
<td class="ng-binding">58231e691b58b970137b56ab</td>
<td class="ng-binding">Operation3</td>
<td class="ng-binding">SUCCESS</td>
<td class="ng-binding">2016-11-09 18:32:33</td>
<td class="ng-binding">2016-11-09 18:32:33</td>
<td ng-click="showText(list.REQUEST,$index)">Request</td>
<td ng-click="showText(list.RESPONSE,$index)">Response</td>
</tr>
<!-- end ngRepeat: list in opMessageLogs -->
<tr class="features ng-scope" ng-repeat="list in opMessageLogs">
<td class="ng-binding">58231e6d1b58b970137b56ac</td>
<td class="ng-binding">Operation4</td>
<td class="ng-binding">SUCCESS</td>
<td class="ng-binding">2016-11-09 18:32:33</td>
<td class="ng-binding">2016-11-09 18:32:37</td>
<td ng-click="showText(list.REQUEST,$index)">Request</td>
<td ng-click="showText(list.RESPONSE,$index)">Response</td>
</tr>
<!-- end ngRepeat: list in opMessageLogs -->
<tr class="features ng-scope" ng-repeat="list in opMessageLogs">
<td class="ng-binding">58231e721b58b970137b56ad</td>
<td class="ng-binding">Operation5</td>
<td class="ng-binding">FAILURE</td>
<td class="ng-binding">2016-11-09 18:32:37</td>
<td class="ng-binding">null</td>
<td ng-click="showText(list.REQUEST,$index)">Request</td>
<td ng-click="showText(list.RESPONSE,$index)">Response</td>
</tr>
<!-- end ngRepeat: list in opMessageLogs -->
<tr class="features ng-scope" ng-repeat="list in opMessageLogs">
<td class="ng-binding">58231e731b58b970137b56ae</td>
<td class="ng-binding">Operation6</td>
<td class="ng-binding">SUCCESS</td>
<td class="ng-binding">2016-11-09 18:32:43</td>
<td class="ng-binding">2016-11-09 18:32:43</td>
<td ng-click="showText(list.REQUEST,$index)">Request</td>
<td ng-click="showText(list.RESPONSE,$index)">Response</td>
</tr>
<!-- end ngRepeat: list in opMessageLogs -->
<tr class="features ng-scope" ng-repeat="list in opMessageLogs">
<td class="ng-binding">58231e741b58b970137b56af</td>
<td class="ng-binding">Operation7</td>
<td class="ng-binding">SUCCESS</td>
<td class="ng-binding">2016-11-09 18:32:43</td>
<td class="ng-binding">2016-11-09 18:32:44</td>
<td ng-click="showText(list.REQUEST,$index)">Request</td>
<td ng-click="showText(list.RESPONSE,$index)">Response</td>
</tr>
<!-- end ngRepeat: list in opMessageLogs -->
<tr class="features ng-scope" ng-repeat="list in opMessageLogs">
<td class="ng-binding">58231e761b58b970137b56b0</td>
<td class="ng-binding">Operation8</td>
<td class="ng-binding">SUCCESS</td>
<td class="ng-binding">2016-11-09 18:32:46</td>
<td class="ng-binding">2016-11-09 18:32:46</td>
<td ng-click="showText(list.REQUEST,$index)">Request</td>
<td ng-click="showText(list.RESPONSE,$index)">Response</td>
</tr>
<!-- end ngRepeat: list in opMessageLogs -->
<tr class="features ng-scope" ng-repeat="list in opMessageLogs">
<td class="ng-binding">58231e771b58b970137b56b1</td>
<td class="ng-binding">Operation9</td>
<td class="ng-binding">SUCCESS</td>
<td class="ng-binding">2016-11-09 18:32:46</td>
<td class="ng-binding">2016-11-09 18:32:47</td>
<td ng-click="showText(list.REQUEST,$index)">Request</td>
<td ng-click="showText(list.RESPONSE,$index)">Response</td>
</tr>
<!-- end ngRepeat: list in opMessageLogs -->
<tr class="features ng-scope" ng-repeat="list in opMessageLogs">
<td class="ng-binding">58231e781b58b970137b56b2</td>
<td class="ng-binding">Operation10</td>
<td class="ng-binding">SUCCESS</td>
<td class="ng-binding">2016-11-09 18:32:47</td>
<td class="ng-binding">2016-11-09 18:32:48</td>
<td ng-click="showText(list.REQUEST,$index)">Request</td>
<td ng-click="showText(list.RESPONSE,$index)">Response</td>
</tr>
<!-- end ngRepeat: list in opMessageLogs -->
<tr class="features ng-scope" ng-repeat="list in opMessageLogs">
<td class="ng-binding">58231e791b58b970137b56b3</td>
<td class="ng-binding">Operation11</td>
<td class="ng-binding">SUCCESS</td>
<td class="ng-binding">2016-11-09 18:32:48</td>
<td class="ng-binding">2016-11-09 18:32:49</td>
<td ng-click="showText(list.REQUEST,$index)">Request</td>
<td ng-click="showText(list.RESPONSE,$index)">Response</td>
</tr>
<!-- end ngRepeat: list in opMessageLogs -->
<tr class="features ng-scope" ng-repeat="list in opMessageLogs">
<td class="ng-binding">58231e8d982cf7857fee2cb9</td>
<td class="ng-binding">Operation1</td>
<td class="ng-binding">SUCCESS</td>
<td class="ng-binding">null</td>
<td class="ng-binding">2016-11-09 18:33:09</td>
<td ng-click="showText(list.REQUEST,$index)">Request</td>
<td ng-click="showText(list.RESPONSE,$index)">Response</td>
</tr>
<!-- end ngRepeat: list in opMessageLogs -->
<tr class="features ng-scope" ng-repeat="list in opMessageLogs">
<td class="ng-binding">58231e97a782de0c9ea24979</td>
<td class="ng-binding">Operation2</td>
<td class="ng-binding">SUCCESS</td>
<td class="ng-binding">2016-11-09 18:33:19</td>
<td class="ng-binding">2016-11-09 18:33:19</td>
<td ng-click="showText(list.REQUEST,$index)">Request</td>
<td ng-click="showText(list.RESPONSE,$index)">Response</td>
</tr>
<!-- end ngRepeat: list in opMessageLogs -->
</tbody>
</table>
</div>
</body>【讨论】：
实际上我的表格可能会根据内容大小扩展到右侧。有什么方法可以做到水平滚动 我已经创建了新的 Jsfiddler 添加我的整个 CSS，如果你有时间可以请你更新那个 CSS，我认为它因为其他一些依赖它不起作用Demo 好吧，我认为水平滚动是不可能的。如果您在 css 中修复一个元素，它将水平和垂直固定。对于您的实际代码：thead position: fixed; // Fix your thead so it won't move z-index: 40; // This way, your thead will be over your tbody 您还应该删除 #wrapper padding-top:10px;
感谢您抽出宝贵的时间，我终于可以通过手动修复宽度来进行管理了。
@Kangouroops，我尝试使用上面的解决方案。似乎正在工作。但是我们怎样才能让表格中的数据向下滚动到表头，而不是在滚动时看到表头的顶部。【参考方案3】：
如果您只想将标题的宽度与 td 元素的宽度相匹配，您可以使用 javascript offsetWidth 来实现。 这将为您提供 td 元素的宽度。所以你可以使用你看到的答案固定表格标题的宽度。
如果您不想使用 javascript ，也许这会对您有所帮助：
.wrapper
display:inline-block;
position:relative;
.tableheader
display:block;
.tablebody
display:block;
overflow-y:scroll;
max-height:80px;
.ng-binding
display:block;
<div class="wrapper">
<div class="tableheader">
Message ID
</div>
<div class="tablebody">
<div class="ng-binding">
58231e66982cf7857fee2cb5
</div>
<div class="ng-binding">
58231e66982cf7857fee2cb5
</div>
<div class="ng-binding">
58231e66982cf7857fee2cb5
</div>
<div class="ng-binding">
58231e66982cf7857fee2cb5
</div>
<div class="ng-binding">
58231e66982cf7857fee2cb5
</div>
<div class="ng-binding">
58231e66982cf7857fee2cb5
</div>
<div class="ng-binding">
58231e66982cf7857fee2cb5
</div>
<div class="ng-binding">
58231e66982cf7857fee2cb5
</div>
</div>
</div>
<div class="wrapper">
<div class="tableheader">
Operation
</div>
<div class="tablebody">
<div class="ng-binding">
Operation1
</div>
<div class="ng-binding">
Operation2
</div>
<div class="ng-binding">
Operation3
</div>
<div class="ng-binding">
Operation11
</div>
<div class="ng-binding">
5Operation12
</div>
<div class="ng-binding">
Operation13
</div>
<div class="ng-binding">
Operation14
</div>
<div class="ng-binding">
Operation15
</div>
</div>
</div>【讨论】：
我不想有独立的滚动条，有没有我只能为此制作一个垂直滚动条。 可能有一种方法可以在没有 javascript 的情况下执行此操作，但我找不到它。【参考方案4】：最后我手动修复了表格宽度，但在这里我做了下面的事情以使其按我想要的方式工作。
最初我手动找到了最大单元格内容的宽度。在不触及 CSS 的情况下，我覆盖了 HTML 本身的宽度，如下所示。
由于在我的实际应用程序中我使用的是 ng-repeat，因此我不需要在每一行中手动添加这些。
任何改进/建议总是被接受:)
style="width : 183px !important;"
Working Demo
注意：请在放大窗口中查看演示，如下所示
我的应用程序 HTML 使用 Ng-Repeat
<div>
<!--, From the local table,-->
<table class="professional">
<tbody>
<thead>
<tr>
<th class="tableheader" style="width : 183px !important;">Message ID</th>
<th class="tableheader" style="width : 353px !important;">Operation</th>
<th class="tableheader" style="width : 88px !important;">Status</th>
<th class="tableheader" style="width : 153px !important;">Account Number</th>
<th class="tableheader" style="width : 130px !important;">Send Time</th>
<th class="tableheader" style="width : 130px !important;">Receive Time</th>
<th class="tableheader" style="width : 113px !important;">Send Data</th>
<th class="tableheader" style="width : 128px !important;">Receive Data</th>
</tr>
</thead>
</tbody>
</table>
</div>
<div class="wrapper">
<table class="professional">
<tbody>
<tr class="features" ng-repeat="list in mesaages">
<td style="width : 183px !important;">list._id.$id</td>
<td style="width : 353px !important;">list.OPERATION</td>
<td style="width : 88px !important;">list.STATUS</td>
<td style="width : 153px !important;">list.ACCOUNTNUMBER</td>
<td style="width : 130px !important;">list.SENDTIME.sec * 1000 | date:'yyyy-MM-dd HH:mm:ss'</td>
<td style="width : 130px !important;">list.RECEIVETIME.sec * 1000 | date:'yyyy-MM-dd HH:mm:ss'</td>
<td ng-click="showText(list.REQUEST,$index)" style="width : 113px !important;"><a style="cursor: pointer;">Request</a></td>
<td ng-click="showText(list.RESPONSE,$index)" style="width : 128px !important;"><a style="cursor: pointer;">Response</a></td>
</tr>
</tbody>
</table>
</div>
【讨论】：
【参考方案5】：试试这个代码：
.container
width:100%;
height:150px;
overflow:auto;
td
border:1px solid;
.header
width:calc(100% - 17px);
width:-webkit-calc(100% - 17px);
width:-moz-calc(100% - 17px);
height:25px;
background:#000;color:#fff;
<table class="header">
<tr >
<td >header</td>
<td >header</td>
</tr>
</table>
<div class="container">
<table style="width:100%; ">
<tr >
<td >body</td>
<td >body</td>
</tr>
<tr >
<td >body</td>
<td >body</td>
</tr>
<tr >
<td >body</td>
<td >body</td>
</tr>
<tr >
<td >body</td>
<td >body</td>
</tr>
<tr >
<td >body</td>
<td >body</td>
</tr>
<tr >
<td >body</td>
<td >body</td>
</tr>
<tr >
<td >body</td>
<td >body</td>
</tr>
<tr >
<td >body</td>
<td >body</td>
</tr>
<tr >
<td >body</td>
<td >body</td>
</tr>
<tr >
<td >body</td>
<td >body</td>
</tr>
</table>
</div>【讨论】：
表格固定标题和可滚动正文
...-12-2507:09:36【问题描述】：我正在尝试使用bootstrap3表制作具有固定标题和可滚动内容的表。不幸的是，我找到的解决方案不适用于bootstrap或破坏样式。这里有一个简单的引导表，但由于某种原因，我不知道tbody的高度不是10px。hei... 查看详情
Flexbox 类型的固定表头，表格标记的可滚动内容
】Flexbox类型的固定表头，表格标记的可滚动内容【英文标题】：Flexboxtypefixedheader,scrollablecontentfortablemarkup【发布时间】：2018-05-2523:31:32【问题描述】：我正在使用一个使用传统表标记的数据表，但我想要的是我的表从页面中的... 查看详情
[前端][css]纯css实现纵向滚动固定表头与横向内容滚动
...考技术A这次要实现的目标是类似这种，纵向滚动时表头固定，横向滚动时，表头跟着滚动最基础的思路就是表头和内容是用两个表格来显示（图来自https://zhuanlan.zhihu.com/p/33280304），关于怎么保存表头和内容列宽一致链接里这个... 查看详情
html中怎么固定一个table的表头和表位，拖动滚动条中间的数据滚动，而表头和表尾固定呢？表尾是用来做合计
...要的效果是一体的，而不是分成3个table来做，网上有很多固定表头和列的例子，但是没有固定表尾的，希望哪个大哥大姐能帮忙解决。给你写个固定表头的例子，固定表尾的就当是课堂练习，希望你能举一反三：<HTML><HEAD&... 查看详情
用于固定组件位置和可滚动窗口的 Java GUI 布局
】用于固定组件位置和可滚动窗口的JavaGUI布局【英文标题】：JavaGUIlayoutforfixedpositionofcomponentsandscrollablewindow【发布时间】：2021-03-2809:48:48【问题描述】：我想制作一个程序，使组件的行为如下图所示TextField和SearchButton位置固定... 查看详情
javascript：固定table的表头
...对表头进行特殊的样式设置。下面的jsp代码可以实现表头固定，经过测试可以直接使用。在IE浏览器下，拉动滚动条时表头会抖动，在谷歌下确实很流程，估计是浏览器的兼容性问题。<!doctypehtmlpublic"-//w3c//dtdhtml4.0trans 查看详情
如何制作具有固定离子卡标题和可滚动离子卡内容的离子卡？
】如何制作具有固定离子卡标题和可滚动离子卡内容的离子卡？【英文标题】：Howtomakeion-cardwithfixedion-card-headerandscrollableion-card-content?【发布时间】：2021-09-1515:13:39【问题描述】：就像这个问题一样，我需要在固定ion-card-header的... 查看详情
实现固定表头和表列的table组件
...比较多时，为了查看方便，希望能在纵向滚动时固定表头，在横向滚动时在左边或右边固定特定表列，这是原生不支持的。目录实际效果设计思路普通表格固定表头固定表列同时固定表头和表列实际效果table同时... 查看详情
在具有位置的div上隐藏滚动条：固定属性[重复]
】在具有位置的div上隐藏滚动条：固定属性[重复]【英文标题】：Hidescrollbarondivwithposition:fixedproperty[duplicate]【发布时间】：2018-09-0523:52:36【问题描述】：我似乎无法弄清楚，如何在具有position:fixed属性集的元素上隐藏滚动条。我... 查看详情
实现固定表头和表列的table组件
...比较多时，为了查看方便，希望能在纵向滚动时固定表头，在横向滚动时在左边或右边固定特定表列，这是原生不支持的。目录实际效果设计思路普通表格固定表头固定表列同时固定表头和表列实际效果table同时... 查看详情
带有滚动正文的引导固定表头
】带有滚动正文的引导固定表头【英文标题】：bootstrapfixedtableheaderswithscrollingbody【发布时间】：2015-11-3006:16:19【问题描述】：编程新手，也是第一次在这里发帖。我在面板中的引导表有点问题。我有一个下拉菜单，用户可以在... 查看详情
table表头固定（原创）
...个简单的插件，无论table多大，位置在哪，都可以使thead固定在table上方；使用的原理是clone一个thead出来，再使用定位，使克隆的元素定位在table上方。1<!DOCTYPEhtml>2<html>3<hea 查看详情
table固定表头固定列实现横向纵向滚动
...只有tbody，分别把两个table用div包裹起来，设置有tbody的div固定高度，超出overflow:scroll；至于横向滚动的问题，可以设置position:sticky，然后根据左右浮动的个数及对应列所在的index，计算left或者right的长度。因为table里thead和tbody本... 查看详情
<table> 具有固定的 <thead> 和可滚动的 <tbody> [重复]
】<table>具有固定的<thead>和可滚动的<tbody>[重复]【英文标题】：<table>withfixed<thead>andscrollable<tbody>[duplicate]【发布时间】：2018-05-2306:26:27【问题描述】：我已经浏览了这里的问题和互联网上的文章，但还... 查看详情
antdvuetable滚动页面固定表头
页面滚动固定表头思路由于直接去控制antdtable的头部置顶会导致头部样式丢失，每列去获取宽度设置感觉太麻烦，最后决定使用两个table，一个只做表头固定使用，不赋予数据。具体做法时，将传入的属于都付给两个table，隐藏... 查看详情
具有固定位置的平滑滚动标题
】具有固定位置的平滑滚动标题【英文标题】：Smoothscrollheaderwithfixedposition【发布时间】：2017-05-3110:20:38【问题描述】：当我将位置更改为固定时如何创建平滑滚动。我尝试添加动画，但它不起作用。更好地使用jqueryanimation();$(wi... 查看详情
elementui组件表格高度以及表头固定表身滚动方法
1.表格高度：在el-table标签里增加一个类名classA,然后写css样式：.classAth,.classAtdpadding:0!important;height:20px;//需要的高度line-height:20px;2.表头固定，表身超过高度自动滚动直接在el-table标签里增加height:100%就可以了。 查看详情
实现html表头固定，表格内的信息向上滚动
效果如下：<!doctypehtml>Table.table{width:100%;border-collapse:collapse;border-spacing:0}.fixedThead{display:block;width:100%}.scrollTbody{display:block;height:262px;overflow:auto;width:100%}.tabletd 查看详情