不幸的是,我发现的解决方案不适用于bootstrap或弄乱了样式。
这里有一个简单的引导表,但由于某种原因我不知道tbody的高度不是10px。
height: 10px !important; overflow: scroll;
示例:
<link rel="stylesheet" type="text/css" href="//netdna.bootstrapcdn.com/bootstrap/3.0.3/css/bootstrap.min.css">
<table class="table table-striped">
<thead>
<tr>
<th>Make</th>
<th>Model</th>
<th>Color</th>
<th>Year</th>
</tr>
</thead>
<tbody style="height: 10px !important; overflow: scroll; ">
<tr>
<td class="filterable-cell">111 Ford</td>
<td class="filterable-cell">Escort</td>
<td class="filterable-cell">Blue</td>
<td class="filterable-cell">2000</td>
</tr>
<tr>
<td class="filterable-cell">Ford</td>
<td class="filterable-cell">Escort</td>
<td class="filterable-cell">Blue</td>
<td class="filterable-cell">2000</td>
</tr>
<tr>
<td class="filterable-cell">Ford</td>
<td class="filterable-cell">Escort</td>
<td class="filterable-cell">Blue</td>
<td class="filterable-cell">2000</td>
</tr>
<tr>
<td class="filterable-cell">Ford</td>
<td class="filterable-cell">Escort</td>
<td class="filterable-cell">Blue</td>
<td class="filterable-cell">2000</td>
</tr>
</tbody>
</table>
#1 楼
固定表头-仅CSS只需
position: sticky; top: 0;
您的th
元素。 (Chrome,FF,Edge) .tableFixHead { overflow-y: auto; height: 100px; }
.tableFixHead thead th { position: sticky; top: 0; }
/* Just common table stuff. Really. */
table { border-collapse: collapse; width: 100%; }
th, td { padding: 8px 16px; }
th { background:#eee; }
<div class="tableFixHead">
<table>
<thead>
<tr><th>TH 1</th><th>TH 2</th></tr>
</thead>
<tbody>
<tr><td>A1</td><td>A2</td></tr>
<tr><td>B1</td><td>B2</td></tr>
<tr><td>C1</td><td>C2</td></tr>
<tr><td>D1</td><td>D2</td></tr>
<tr><td>E1</td><td>E2</td></tr>
</tbody>
</table>
</div>
TH边界问题修复
由于无法在已翻译的
border
元素上正确绘制TH
,因此要重新创建和渲染“边界”,请使用box-shadow
属性: /* Borders (if you need them) */
.tableFixHead,
.tableFixHead td {
box-shadow: inset 1px -1px #000;
}
.tableFixHead th {
box-shadow: inset 1px 1px #000, 0 1px #000;
}
.tableFixHead { overflow-y: auto; height: 100px; }
.tableFixHead thead th { position: sticky; top: 0; }
/* Just common table stuff. Really. */
table { border-collapse: collapse; width: 100%; }
th, td { padding: 8px 16px; }
th { background:#eee; }
/* Borders (if you need them) */
.tableFixHead,
.tableFixHead td {
box-shadow: inset 1px -1px #000;
}
.tableFixHead th {
box-shadow: inset 1px 1px #000, 0 1px #000;
}
<div class="tableFixHead">
<table>
<thead>
<tr><th>TH 1</th><th>TH 2</th></tr>
</thead>
<tbody>
<tr><td>A1</td><td>A2</td></tr>
<tr><td>B1</td><td>B2</td></tr>
<tr><td>C1</td><td>C2</td></tr>
<tr><td>D1</td><td>D2</td></tr>
<tr><td>E1</td><td>E2</td></tr>
</tbody>
</table>
</div>
固定的表头-使用JS。 (IE)
您可以使用一些JS并翻译
th
元素jQuery示例
var $th = $('.tableFixHead').find('thead th')
$('.tableFixHead').on('scroll', function() {
$th.css('transform', 'translateY('+ this.scrollTop +'px)');
});
.tableFixHead { overflow-y: auto; height: 100px; }
/* Just common table stuff. */
table { border-collapse: collapse; width: 100%; }
th, td { padding: 8px 16px; }
th { background:#eee; }
<div class="tableFixHead">
<table>
<thead>
<tr><th>TH 1</th><th>TH 2</th></tr>
</thead>
<tbody>
<tr><td>A1</td><td>A2</td></tr>
<tr><td>B1</td><td>B2</td></tr>
<tr><td>C1</td><td>C2</td></tr>
<tr><td>D1</td><td>D2</td></tr>
<tr><td>E1</td><td>E2</td></tr>
</tbody>
</table>
</div>
<script src="https://code.jquery.com/jquery-3.1.0.js"></script>
或者如果愿意,可以使用普通ES6(不需要jQuery):
// Fix table head
function tableFixHead (e) {
const el = e.target,
sT = el.scrollTop;
el.querySelectorAll("thead th").forEach(th =>
th.style.transform = `translateY(${sT}px)`
);
}
document.querySelectorAll(".tableFixHead").forEach(el =>
el.addEventListener("scroll", tableFixHead)
);
评论
哇,这是开销最少的最佳选择!它也可以立即使用overflow-x。
–希望
18年5月22日在11:38
是!即使在可变的单元格宽度下也可以使用(不需要像其他示例一样对单元格宽度进行硬编码)@Wish
– Roko C. Buljan
18年5月22日在12:17
很好的解决方案!谢谢
–德米特里·尼希波连科(Dmitry Nichiporenko)
18年8月11日在7:15
我发现这在Chrome和Firefox中有效,但是使用这种方法无法在Edge或IE11中修复标头。
–杰夫
18年8月13日在5:29
以上示例中的@PussInBoots?铬?一无所有
– Roko C. Buljan
18/12/29在18:13
#2 楼
可能会在一页上获得多个表,因此需要CSS类。请为此找到一个经过修改的@giulio解决方案。只需在表中声明它即可:
<table class="table table-striped header-fixed"></table>
CSS
.header-fixed {
width: 100%
}
.header-fixed > thead,
.header-fixed > tbody,
.header-fixed > thead > tr,
.header-fixed > tbody > tr,
.header-fixed > thead > tr > th,
.header-fixed > tbody > tr > td {
display: block;
}
.header-fixed > tbody > tr:after,
.header-fixed > thead > tr:after {
content: ' ';
display: block;
visibility: hidden;
clear: both;
}
.header-fixed > tbody {
overflow-y: auto;
height: 150px;
}
.header-fixed > tbody > tr > td,
.header-fixed > thead > tr > th {
width: 20%;
float: left;
}
请注意,当前实现仅适合五列。如果需要其他数字,请将width参数从20%更改为* 100%/ number_of_columns *。
评论
在遵循所有不同的复杂解决方案之后,我发现这是最好的解决方案。但是,垂直滚动条在处具有一定的宽度(这是显而易见的),但由于此原因,页眉和行之间存在轻微的不匹配对齐。我有7列,因此在使用提及公式进行计算后,我将宽度设置为14.28%
–车丹
2015年2月25日在12:48
如何为每列分配一定的宽度?
–user1807271
15年5月27日在14:28
@ user1807271,您可以通过JS分配每列的宽度,或创建具有所需宽度的每列类(例如“ col1”,“ col2”等),并为第一列上的所有单元格分配类“ col1” ,“ col2”和第二个等,以此类推。
–卢克
2015年9月1日下午13:33
我建议您还添加.header-fixed> thead> tr> th {white-space:nowrap;}。如果标题开始换行,则会搞砸
–by0
16年4月6日在10:16
这是唯一对我有用的解决方案,我为这个问题发疯了:D我正在使用物化,这个答案对我有很大帮助,此外,我还添加了scrollbar-width:none;出于审美原因
–天使
19年2月27日在4:26
#3 楼
这是有效的解决方案: table {
width: 100%;
}
thead, tbody, tr, td, th { display: block; }
tr:after {
content: ' ';
display: block;
visibility: hidden;
clear: both;
}
thead th {
height: 30px;
/*text-align: left;*/
}
tbody {
height: 120px;
overflow-y: auto;
}
thead {
/* fallback */
}
tbody td, thead th {
width: 19.2%;
float: left;
}
<link href="http://netdna.bootstrapcdn.com/bootstrap/3.0.3/css/bootstrap.min.css" rel="stylesheet"/>
<table class="table table-striped">
<thead>
<tr>
<th>Make</th>
<th>Model</th>
<th>Color</th>
<th>Year</th>
</tr>
</thead>
<tbody>
<tr>
<td class="filterable-cell">Ford</td>
<td class="filterable-cell">Escort</td>
<td class="filterable-cell">Blue</td>
<td class="filterable-cell">2000</td>
</tr>
<tr>
<td class="filterable-cell">Ford</td>
<td class="filterable-cell">Escort</td>
<td class="filterable-cell">Blue</td>
<td class="filterable-cell">2000</td>
</tr>
<tr>
<td class="filterable-cell">Ford</td>
<td class="filterable-cell">Escort</td>
<td class="filterable-cell">Blue</td>
<td class="filterable-cell">2000</td>
</tr>
<tr>
<td class="filterable-cell">Ford</td>
<td class="filterable-cell">Escort</td>
<td class="filterable-cell">Blue</td>
<td class="filterable-cell">2000</td>
</tr>
</tbody>
</table>
链接到jsfiddle
评论
在IE9(可能还有其他)中不起作用;需要固定宽度的列(如果要使用固定宽度的列,则有很多更简单,更跨浏览器的解决方案);如果内容超出固定宽度,则会严重破裂;尽管可能是固定的,但实际上并没有将标题和列对齐(您可以在上面的小提琴中看到它;在此版本中更清晰,为它们提供了简单的边框)。滚动条与表格的主体不太对齐...
– T.J.拥挤者
14年6月21日在12:22
在td和th上添加可见边框,您将看到td的宽度与th的宽度不匹配
–阿波罗
2014-10-28 13:26
该解决方案的问题在于它需要固定的高度。在采用自适应设计的地方这是行不通的。我一直在研究使用position:fixed的解决方案,该解决方案解决了滚动问题,但弄乱了行宽。
– Jeffrey A. Gochin
2015年9月7日下午0:05
您可以通过分隔td和th的width%声明,然后将th设置为稍微窄一些,来手动固定与th宽度不匹配的td宽度。您每次都会自定义它,但这不是应该经常使用的东西。
–本·霍夫曼
16年7月28日在15:51
我花了很长时间研究各种解决方案,然后偶然发现了这个插件,该插件也可用于bootstrap 3(和bootstrap 4)表。 mkoryak.github.io/floatThead/#intro
–提请
19年5月7日在18:32
#4 楼
更新对于更新且仍维护的库,请尝试jquery.floatThead(由Bob Jordan在评论中提及)。
旧答案
这是一个非常旧的答案,下面提到的库不再维护。
我在GitHub上使用StickyTableHeaders,它的工作原理类似于charm!
我必须添加此CSS以使标头不透明。
table#stickyHeader thead {
border-top: none;
border-bottom: none;
background-color: #FFF;
}
评论
请注意,stickyTableHeaders插件仅在浏览器最初加载时会找到页面中的html,而不会提取动态生成的内容
–罗布·塞奇威克
2015年9月2日在11:38
@RobSedgwick,我没有这个,但它仍然可以正常工作。只要在表生成后初始化stickyTableHeadres。这意味着您不能在头中初始化它,而是在动态生成的表完成后立即对其进行初始化。
– Rosdi Kasim
2015年9月3日在21:38
很棒的解决方案。非常感激。如果有人在使背景变得不透明时遇到问题,则必须使用.tableFloatingHeaderOriginal {// css}。
–马特·伊纳达尔(Matt Inamdar)
16年4月29日在19:19
感谢您分享此插件。很棒!
– blazerunner44
16年5月11日下午4:13
自2017年起积极维护的替代库-> github.com/mkoryak/floatThead
–鲍勃·乔丹
17年5月7日在5:20
#5 楼
不需要将其包装在div中...CSS:
tr {
width: 100%;
display: inline-table;
table-layout: fixed;
}
table{
height:300px; // <-- Select the height of the table
display: -moz-groupbox; // Firefox Bad Effect
}
tbody{
overflow-y: scroll;
height: 200px; // <-- Select the height of the body
width: 100%;
position: absolute;
}
引导程序:http://www.bootply。 com / AgI8LpDugl
评论
位置:绝对在身体上有帮助!谢谢 !!
– Anish Nair
2014年9月19日在12:20
在您意识到列数据必须具有相同的宽度之前,这看起来很棒。如果不是,则数据不适合该标题。
– Tmac
15年2月17日在19:44
当单个单元溢出时,此解决方案将不起作用。
– John Zabroski
16年6月20日在20:18
无论是Bootply还是解决方案,这都不适用于chrome。
–kevinc
17年4月7日在10:11
仅作评论,它对我在Chrome中有效,表格位于页面内容的中间顶部。...您能否提供更多信息? (我在Linux上)
–贝纳德·帕特里克(BENARD Patrick)
19 Mar 25 '19在11:11
#6 楼
使用CSS更容易table tbody { display:block; max-height:450px; overflow-y:scroll; }
table thead, table tbody tr { display:table; width:100%; table-layout:fixed; }
评论
您可以克服表格布局:通过使用JavaScript添加CSS类来解决
–user2182349
19年7月19日在19:48
这看起来是最聪明的方法,但是它可以在任何地方使用吗?
–佩里
5月3日15:52
据我所知,确实如此。
– Simsek
5月4日22:35
th与td不符
–deanwilliammills
12月7日8:06
#7 楼
参加聚会晚了(这是我一生的故事),但是由于这是google上的第一个结果,而以上都不是我的工作,所以这是我的代码/*Set a min width where your table start to look like crap*/
table { min-width: 600px; }
/*The next 3 sections make the magic happen*/
thead, tbody tr {
display: table;
width: 100%;
table-layout: fixed;
}
tbody {
display: block;
max-height: 200px;
overflow-x: hidden;
overflow-y: scroll;
}
td {
overflow: hidden;
text-overflow: ellipsis;
}
/*Use the following to make sure cols align correctly*/
table, tr, th, td {
border: 1px solid black;
border-collapse: collapse;
}
/*Set your columns to where you want them to be, skip the one that you can have resize to any width*/
th:nth-child(1), td:nth-child(1) {
width: 85px;
}
th:nth-child(2), td:nth-child(2) {
width: 150px;
}
th:nth-child(4), td:nth-child(4) {
width: 125px;
}
th:nth-child(5) {
width: 102px;
}
td:nth-child(5) {
width: 85px;
}
评论
它对我有用,但是现在所有的td都具有相同的宽度。我不想要的。
–shubhamkes
17年8月1日在8:40
就是棒。旁注:th:nth-child(2),td:nth-child(2)等效于tr>:nth-child(2)
–华盛顿瓜迪斯
18年4月12日在18:43
1赞不绝口,描述如果表太小,表将如何“看起来像废话”,这让我发笑
– Michael S. Miller
18-09-14在13:02
#8 楼
table {
overflow-y: auto;
height: 50vh; /* !!! HEIGHT MUST BE IN [ vh ] !!! */
}
thead th {
position: sticky;
top: 0;
}
<table>
<thead>
<tr><th>TH 1</th><th>TH 2</th></tr>
</thead>
<tbody>
<tr><td>A1</td><td>A2</td></tr>
<tr><td>B1</td><td>B2</td></tr>
<tr><td>C1</td><td>C2</td></tr>
<tr><td>D1</td><td>D2</td></tr>
<tr><td>E1</td><td>E2</td></tr>
<tr><td>F1</td><td>F2</td></tr>
<tr><td>G1</td><td>G2</td></tr>
<tr><td>H1</td><td>H2</td></tr>
<tr><td>I1</td><td>I2</td></tr>
<tr><td>J1</td><td>J2</td></tr>
<tr><td>K1</td><td>K2</td></tr>
<tr><td>L1</td><td>L2</td></tr>
<tr><td>M1</td><td>M2</td></tr>
<tr><td>N1</td><td>N2</td></tr>
<tr><td>O1</td><td>O2</td></tr>
<tr><td>P1</td><td>P2</td></tr>
<tr><td>Q1</td><td>Q2</td></tr>
<tr><td>R1</td><td>R2</td></tr>
<tr><td>S1</td><td>S2</td></tr>
<tr><td>T1</td><td>T2</td></tr>
<tr><td>U1</td><td>U2</td></tr>
<tr><td>V1</td><td>V2</td></tr>
<tr><td>W1</td><td>W2</td></tr>
<tr><td>X1</td><td>X2</td></tr>
<tr><td>Y1</td><td>Y2</td></tr>
<tr><td>Z1</td><td>Z2</td></tr>
</tbody>
</table>
您不需要js。重要的是在[vh]中设置桌子高度
#9 楼
在我看来,最好的jQuery插件之一就是DataTables。它还具有固定标头的扩展,并且很容易实现。
来自他们的网站:
HTML:
<table id="example" class="display" cellspacing="0" width="100%">
<thead>
<tr>
<th>Name</th>
<th>Position</th>
<th>Office</th>
<th>Age</th>
<th>Start date</th>
<th>Salary</th>
</tr>
</thead>
<tfoot>
<tr>
<th>Name</th>
<th>Position</th>
<th>Office</th>
<th>Age</th>
<th>Start date</th>
<th>Salary</th>
</tr>
</tfoot>
<tbody>
<tr>
<td>Tiger Nixon</td>
<td>System Architect</td>
<td>Edinburgh</td>
<td>61</td>
<td>2011/04/25</td>
<td>0,800</td>
</tr>
<tr>
<td>Garrett Winters</td>
<td>Accountant</td>
<td>Tokyo</td>
<td>63</td>
<td>2011/07/25</td>
<td>0,750</td>
</tr>
<tr>
<td>Ashton Cox</td>
<td>Junior Technical Author</td>
<td>San Francisco</td>
<td>66</td>
<td>2009/01/12</td>
<td>,000</td>
</tr>
</tbody>
</table>
JavaScript:
$(document).ready(function() {
var table = $('#example').DataTable();
new $.fn.dataTable.FixedHeader( table );
} );
但是最简单您只需制作一个可滚动的
<tbody>
就可以://configure table with fixed header and scrolling rows
$('#example').DataTable({
scrollY: 400,
scrollCollapse: true,
paging: false,
searching: false,
ordering: false,
info: false
});
评论
看起来很有希望。我将在今天晚些时候实现此功能,并查看它如何为我工作。
–安东尼
15年11月8日在19:31
谢谢,我实现了这个功能,它开箱即用。我需要一个可以通过移动设备进行管理的可行表,而它正是这样做的。标头也粘。
–佛罗里达G.
2015年12月5日,下午3:49
我希望第一列和标题都固定,这是根据数据表兼容性表不可能的
– PirateApp
18年7月6日在15:30
我用它来达到相当不错的效果。在某些情况下看起来有些怪异,但这可能是我对CSS的经验不足。
–大卫·布拉德利(David Bradley)
19年2月27日在18:43
#10 楼
到目前为止,我见过的最好的解决方案仅是CSS,具有良好的跨浏览器支持,并且没有对齐问题,这是来自codingrabbithole的解决方案。table { width: 100%; } thead, tbody tr { display: table; width: 100%; table-layout: fixed; } tbody { display: block; overflow-y: auto; table-layout: fixed; max-height: 200px; }
pre >评论
我跳过了下面的@Roko C. Buljan给出的评分更高的答案,却发现当标题有多行时,该答案不起作用。该解决方案效果很好。非常感谢!!!
– shao.lo
9月23日1:22
Dunno,如果是因为我的表格是嵌套网格布局,或者表格确实很宽,但这会在我的表格上产生最奇怪的渲染-就像每列都向右偏移了几个像素,所以每列几乎覆盖前一个,导致外观非常混乱
–迈克尔
12月7日17:49
如果您想使用colgroup>来管理表的列宽,则此方法将无效-您所有设置被忽略。
–izogfif
12月10日14:28
#11 楼
最新添加的位置:“粘性”将是这里最简单的解决方案 .outer{
overflow-y: auto;
height:100px;
}
.outer table{
width: 100%;
table-layout: fixed;
border : 1px solid black;
border-spacing: 1px;
}
.outer table th {
text-align: left;
top:0;
position: sticky;
background-color: white;
}
<div class = "outer">
<table>
<tr >
<th>col1</th>
<th>col2</th>
<th>col3</th>
<th>col4</th>
<th>col5</th>
<tr>
<tr >
<td>data</td>
<td>data</td>
<td>data</td>
<td>data</td>
<td>data</td>
<tr>
<tr >
<td>data</td>
<td>data</td>
<td>data</td>
<td>data</td>
<td>data</td>
<tr>
<tr >
<td>data</td>
<td>data</td>
<td>data</td>
<td>data</td>
<td>data</td>
<tr>
<tr >
<td>data</td>
<td>data</td>
<td>data</td>
<td>data</td>
<td>data</td>
<tr>
<tr >
<td>data</td>
<td>data</td>
<td>data</td>
<td>data</td>
<td>data</td>
<tr>
<tr >
<td>data</td>
<td>data</td>
<td>data</td>
<td>data</td>
<td>data</td>
<tr>
</table>
</div>
评论
可爱又有用
–米格尔·奥尔蒂斯(Miguel Ortiz)
19年5月15日在20:43
#12 楼
您应该尝试使用“ display:block;”到身体,因为现在它是内联块,并且为了设置高度,该元素应为“块”评论
display:block是必需的,但随后我还必须将float:left并为所有单元格设置适当的宽度。我发布的解决方案现在可以使用了。
– Giulio
2014年1月16日23:32
我确实在Tbody和thead上显示了:block,它们完美对齐。块是滚动和高度起作用的关键。谢谢。
– Blissweb
10月26日7:14
#13 楼
要让stickytableheaders库正常工作,我会遇到很多麻烦。经过更多搜索,我发现floatThead是一个积极维护的替代方案,具有最新更新和更好的文档。#14 楼
首先为引导表添加一些标记。在这里,我创建了一个带区卷的表,但还添加了一个自定义表类.table-scroll
,该类向表添加了垂直滚动条,并在向下滚动时固定了表头。<div class="col-xs-8 col-xs-offset-2 well">
<table class="table table-scroll table-striped">
<thead>
<tr>
<th>#</th>
<th>First Name</th>
<th>Last Name</th>
<th>County</th>
</tr>
</thead>
<tbody>
<tr>
<td>1</td>
<td>Andrew</td>
<td>Jackson</td>
<td>Washington</td>
</tr>
<tr>
<td>2</td>
<td>Thomas</td>
<td>Marion</td>
<td>Jackson</td>
</tr>
<tr>
<td>3</td>
<td>Benjamin</td>
<td>Warren</td>
<td>Lincoln</td>
</tr>
<tr>
<td>4</td>
<td>Grant</td>
<td>Wayne</td>
<td>Union</td>
</tr>
<tr>
<td>5</td>
<td>John</td>
<td>Adams</td>
<td>Marshall</td>
</tr>
<tr>
<td>6</td>
<td>Morgan</td>
<td>Lee</td>
<td>Lake</td>
</tr>
<tr>
<td>7</td>
<td>John</td>
<td>Henry</td>
<td>Brown</td>
</tr>
<tr>
<td>8</td>
<td>William</td>
<td>Jacob</td>
<td>Orange</td>
</tr>
<tr>
<td>9</td>
<td>Kelly</td>
<td>Davidson</td>
<td>Taylor</td>
</tr>
<tr>
<td>10</td>
<td>Colleen</td>
<td>Hurst</td>
<td>Randolph</td>
</tr>
<tr>
<td>11</td>
<td>Rhona</td>
<td>Herrod</td>
<td>Cumberland</td>
</tr>
<tr>
<td>12</td>
<td>Jane</td>
<td>Paul</td>
<td>Marshall</td>
</tr>
<tr>
<td>13</td>
<td>Ashton</td>
<td>Fox</td>
<td>Calhoun</td>
</tr>
<tr>
<td>14</td>
<td>Garrett</td>
<td>John</td>
<td>Madison</td>
</tr>
<tr>
<td>15</td>
<td>Fredie</td>
<td>Winters</td>
<td>Washington</td>
</tr>
</tbody>
</table>
</div>
CSS
.table-scroll tbody {
position: absolute;
overflow-y: scroll;
height: 250px;
}
.table-scroll tr {
width: 100%;
table-layout: fixed;
display: inline-table;
}
.table-scroll thead > tr > th {
border: none;
}
#15 楼
我使用了floatThead jQuery插件(https://mkoryak.github.io/floatThead/#intro)docs说它适用于Bootstrap 3表,我可以说它也适用于Bootstrap 4表
使用插件就这么简单:
HTML(香草程序引导表标记)
<div class="table-responsive">
<table id="myTable" class="table table-striped">
<thead>...</thead>
<tbody>...</tbody>
</table>
</div>
插件初始化:
$(document).ready(function() {
var tbl=$('#myTable');
tbl.floatThead({
responsiveContainer: function(tbl) {
return tbl.closest('.table-responsive');
}
});
});
完整免责声明:
我与插件没有任何关联。经过数小时尝试这里和其他地方发布的其他解决方案后,我偶然发现了它。
评论
这是一个很棒的插件!完全免责声明:我写的。
–mkoryak
19/12/10在20:44
#16 楼
在单个窗口中支持多个可滚动表。纯CSS,没有固定或粘滞。
我正在搜索具有自动“ td”和“ th”宽度的固定表标题年份。终于我编码了一些东西,它对我来说很好用,但是我不确定它对每个人都很好。
问题1:当有很多“ tr”时,我们不能设置桌子或床身的高度原因是默认的表格属性。解决方案:将表格设置为显示属性。
问题2:设置显示属性时,“ td”元素的宽度不能等于“ th”个元素的宽度。而且很难像100%这样在全宽表格中正确填充元素。
解决方案:CSS“ flex”是宽度和填充设置的很好的解决方案,因此我们将构建tbody和thead CSS“ flex”的元素。
.ea_table {
border: 1px solid #ddd;
display: block;
background: #fff;
overflow-y: hidden;
box-sizing: border-box;
float: left;
height:auto;
width: 100%;
}
.ea_table tbody, thead {
flex-direction: column;
display: flex;
}
.ea_table tbody {
height: 300px;
overflow: auto;
}
.ea_table thead {
border-bottom: 1px solid #ddd;
}
.ea_table tr {
display: flex;
}
.ea_table tbody tr:nth-child(2n+1) {
background: #f8f8f8;
}
.ea_table td, .ea_table th {
text-align: left;
font-size: 0.75rem;
padding: 1.5rem;
flex: 1;
}
<table class="ea_table">
<thead>
<tr>
<th>Something Long</th>
<th>Something </th>
<th>Something Very Long</th>
<th>Something Long</th>
<th>Some</th>
</tr>
</thead>
<tbody>
<tr>
<td> Lorem Ipsum Dolar Sit Amet</td>
<td> Lorem </td>
<td> Lorem Ipsum </td>
<td> Lorem </td>
<td> Lorem Ipsum Dolar </td>
</tr>
<tr>
<td> Lorem </td>
<td> Lorem Ipsum Dolar Sit Amet</td>
<td> Lorem </td>
<td> Lorem Ipsum </td>
<td> Lorem Ipsum Dolar </td>
</tr>
<tr>
<td> Lorem Ipsum Dolar Sit Amet</td>
<td> Lorem </td>
<td> Lorem Ipsum </td>
<td> Lorem </td>
<td> Lorem Ipsum Dolar </td>
</tr>
<tr>
<td> Lorem Ipsum Dolar Sit Amet</td>
<td> Lorem </td>
<td> Lorem Ipsum </td>
<td> Lorem </td>
<td> Lorem Ipsum Dolar </td>
</tr>
<tr>
<td> Lorem Ipsum Dolar Sit Amet</td>
<td> Lorem </td>
<td> Lorem Ipsum </td>
<td> Lorem </td>
<td> Lorem Ipsum Dolar </td>
</tr>
<tr>
<td> Lorem Ipsum Dolar Sit Amet</td>
<td> Lorem </td>
<td> Lorem Ipsum </td>
<td> Lorem </td>
<td> Lorem Ipsum Dolar </td>
</tr>
<tr>
<td> Lorem Ipsum Dolar Sit Amet</td>
<td> Lorem </td>
<td> Lorem Ipsum </td>
<td> Lorem </td>
<td> Lorem Ipsum Dolar </td>
</tr>
<tr>
<td> Lorem Ipsum Dolar Sit Amet</td>
<td> Lorem </td>
<td> Lorem Ipsum </td>
<td> Lorem </td>
<td> Lorem Ipsum Dolar </td>
</tr>
</tbody>
</table>
jsfiddle
#17 楼
对于全高的桌子(页面滚动而不是桌子)注意:我移动了整个
<thead>...</thead>
,因为我有两行(标题和过滤器)使用JS(jQuery)
$( function() {
let marginTop = 0; // Add margin if the page has a top nav-bar
let $thead = $('.table-fixed-head').find('thead');
let offset = $thead.first().offset().top - marginTop;
let lastPos = 0;
$(window).on('scroll', function () {
if ( window.scrollY > offset )
{
if ( lastPos === 0 )
{
// Add a class for styling
$thead.addClass('floating-header');
}
lastPos = window.scrollY - offset;
$thead.css('transform', 'translateY(' + ( lastPos ) + 'px)');
}
else if ( lastPos !== 0 )
{
lastPos = 0;
$thead.removeClass('floating-header');
$thead.css('transform', 'translateY(' + 0 + 'px)');
}
});
});
CSS(仅用于样式设计)
thead.floating-header>tr>th {
background-color: #efefef;
}
thead.floating-header>tr:last-child>th {
border-bottom: 1px solid #aaa;
}
#18 楼
现在,“所有”浏览器都支持ES6,我已经将上述各种建议合并到了一个JavaScript类中,该类采用一个表作为参数,并使主体可滚动。它使浏览器的布局引擎可以确定标题和主体单元格的宽度,然后使列的宽度彼此匹配。表的高度可以显式设置,也可以填充表格的其余部分浏览器窗口,并为诸如视口调整大小和/或
details
元素打开或关闭之类的事件提供回调。多行标头支持可用,如果表使用id / headers属性,则特别有效WCAC指南中指定的可访问性,这并不是看起来那么繁琐的要求。
该代码不依赖于任何库,但是如果使用它们,它们可以很好地配合使用。 (在使用JQuery的页面上经过测试)。
Github上提供了代码和示例用法。
#19 楼
在原始帖子的评论中使用了Hashem Qolami的以下链接stackoverflow.com/a/17380697/1725764,并使用display:inline-blocks而不是floats。如果表的类为'table-bordered',则修复边框也可以。
table.scroll {
width: 100%;
&.table-bordered {
td, th {
border-top: 0;
border-right: 0;
}
th {
border-bottom-width: 1px;
}
td:first-child,
th:first-child {
border-right: 0;
border-left: 0;
}
}
tbody {
height: 200px;
overflow-y: auto;
overflow-x: hidden;
}
tbody, thead {
display: block;
}
tr {
width: 100%;
display: block;
}
th, td {
display: inline-block;
}
td {
height: 46px; //depends on your site
}
}
然后只需加上td和th的宽度
table.table-prep {
tr > td.type,
tr > th.type{
width: 10%;
}
tr > td.name,
tr > th.name,
tr > td.notes,
tr > th.notes,
tr > td.quantity,
tr > th.quantity{
width: 30%;
}
}
#20 楼
您可以放置两个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>
#21 楼
这是我的copen笔,介绍如何制作具有可滚动行和列的固定表标题。列的宽度也是固定的,http://codepen.io/abhilashn/pen/GraJyp<!-- Listing table -->
<div class="row">
<div class="col-sm-12">
<div class="cust-table-cont">
<div class="table-responsive">
<table border="0" class="table cust-table">
<thead>
<tr style="">
<th style="width:80px;">#</th>
<th style="width:150px;" class="text-center"><li class="fa fa-gear"></li></th>
<th style="width:250px;">Title</th>
<th style="width:200px;">Company</th>
<th style="width:100px;">Priority</th>
<th style="width:120px;">Type</th>
<th style="width:150px;">Assigned to</th>
<th style="width:120px;">Status</th>
</tr>
</thead>
<tbody>
<tr>
<th style="width:80px;">1</th>
<td style="width:150px;" class="text-center"><button class="btn btn-outline-danger del-icon"><span class="fa fa-trash-o"></span></button> <button class="btn btn-outline-success"><span class="fa fa-pencil"></span></button></td>
<td style="width:250px;">Lorem ipsum dolor sit</td>
<td style="width:200px;">lorem ispusm</td>
<td style="width:100px;">high</td>
<td style="width:120px;">lorem ipsum</td>
<td style="width:150px;">lorem ipsum</td>
<td style="width:120px;">lorem ipsum</td>
</tr>
<tr>
<th scope="row">2</th>
<td class="text-center"><button class="btn btn-outline-danger del-icon"><span class="fa fa-trash-o"></span></button> <button class="btn btn-outline-success"><span class="fa fa-pencil"></span></button></td>
<td>Lorem ipsum dolor sit</td>
<td>lorem ispusm</td>
<td>high</td>
<td>lorem ipsum</td>
<td>lorem ipsum</td>
<td>lorem ipsum</td>
</tr>
<tr>
<th scope="row">3</th>
<td class="text-center"><button class="btn btn-outline-danger del-icon"><span class="fa fa-trash-o"></span></button> <button class="btn btn-outline-success"><span class="fa fa-pencil"></span></button></td>
<td>Lorem ipsum dolor sit</td>
<td>lorem ispusm</td>
<td>high</td>
<td>lorem ipsum</td>
<td>lorem ipsum</td>
<td>lorem ipsum</td>
</tr>
<tr>
<th scope="row">4</th>
<td class="text-center"><button class="btn btn-outline-danger del-icon"><span class="fa fa-trash-o"></span></button> <button class="btn btn-outline-success"><span class="fa fa-pencil"></span></button></td>
<td>Lorem ipsum dolor sit</td>
<td>lorem ispusm</td>
<td>high</td>
<td>lorem ipsum</td>
<td>lorem ipsum</td>
<td>lorem ipsum</td>
</tr>
<tr>
<th scope="row">5</th>
<td class="text-center"><button class="btn btn-outline-danger del-icon"><span class="fa fa-trash-o"></span></button> <button class="btn btn-outline-success"><span class="fa fa-pencil"></span></button></td>
<td>Lorem ipsum dolor sit</td>
<td>lorem ispusm</td>
<td>high</td>
<td>lorem ipsum</td>
<td>lorem ipsum</td>
<td>lorem ipsum</td>
</tr>
<tr>
<th scope="row">6</th>
<td class="text-center"><button class="btn btn-outline-danger del-icon"><span class="fa fa-trash-o"></span></button> <button class="btn btn-outline-success"><span class="fa fa-pencil"></span></button></td>
<td>Lorem ipsum dolor sit</td>
<td>lorem ispusm</td>
<td>high</td>
<td>lorem ipsum</td>
<td>lorem ipsum</td>
<td>lorem ipsum</td>
</tr>
<tr>
<th scope="row">7</th>
<td class="text-center"><button class="btn btn-outline-danger del-icon"><span class="fa fa-trash-o"></span></button> <button class="btn btn-outline-success"><span class="fa fa-pencil"></span></button></td>
<td>Lorem ipsum dolor sit</td>
<td>lorem ispusm</td>
<td>high</td>
<td>lorem ipsum</td>
<td>lorem ipsum</td>
<td>lorem ipsum</td>
</tr>
<tr>
<th scope="row">8</th>
<td class="text-center"><button class="btn btn-outline-danger del-icon"><span class="fa fa-trash-o"></span></button> <button class="btn btn-outline-success"><span class="fa fa-pencil"></span></button></td>
<td>Lorem ipsum dolor sit</td>
<td>lorem ispusm</td>
<td>high</td>
<td>lorem ipsum</td>
<td>lorem ipsum</td>
<td>lorem ipsum</td>
</tr>
<tr>
<th scope="row">9</th>
<td class="text-center"><button class="btn btn-outline-danger del-icon"><span class="fa fa-trash-o"></span></button> <button class="btn btn-outline-success"><span class="fa fa-pencil"></span></button></td>
<td>Lorem ipsum dolor sit</td>
<td>lorem ispusm</td>
<td>high</td>
<td>lorem ipsum</td>
<td>lorem ipsum</td>
<td>lorem ipsum</td>
</tr>
<tr>
<th scope="row">10</th>
<td class="text-center"><button class="btn btn-outline-danger del-icon"><span class="fa fa-trash-o"></span></button> <button class="btn btn-outline-success"><span class="fa fa-pencil"></span></button></td>
<td>Lorem ipsum dolor sit</td>
<td>lorem ispusm</td>
<td>high</td>
<td>lorem ipsum</td>
<td>lorem ipsum</td>
<td>lorem ipsum</td>
</tr>
<tr>
<th scope="row">11</th>
<td class="text-center"><button class="btn btn-outline-danger del-icon"><span class="fa fa-trash-o"></span></button> <button class="btn btn-outline-success"><span class="fa fa-pencil"></span></button></td>
<td>Lorem ipsum dolor sit</td>
<td>lorem ispusm</td>
<td>high</td>
<td>lorem ipsum</td>
<td>lorem ipsum</td>
<td>lorem ipsum</td>
</tr>
<tr>
<th scope="row">12</th>
<td class="text-center"><button class="btn btn-outline-danger del-icon"><span class="fa fa-trash-o"></span></button> <button class="btn btn-outline-success"><span class="fa fa-pencil"></span></button></td>
<td>Lorem ipsum dolor sit</td>
<td>lorem ispusm</td>
<td>high</td>
<td>lorem ipsum</td>
<td>lorem ipsum</td>
<td>lorem ipsum</td>
</tr>
</tbody>
</table>
</div>
</div> <!-- End of cust-table-cont block -->
</div>
</div> <!-- ENd of row -->
.cust-table-cont { width:100%; overflow-x:auto; }
.cust-table-cont .table-responsive { width:1190px; }
.cust-table { table-layout:fixed; }
.cust-table thead, .cust-table tbody {
display: block;
}
.cust-table tbody { max-height:620px; overflow-y:auto; }
#22 楼
无论现在是什么,我都用HTML和CSS发布了一个姊妹线程表滚动的解决方案,该滚动接收两个表(一个仅用于表头,一个用于所有表-布局为浏览器)
布局后,将上部(仅标头)表调整为下部表的宽度
隐藏(
visibility
,而不是display
)下部表的标题并使下部表可滚动/在div中该解决方案与所使用的任何样式/框架无关-因此也许在这里也很有用...
在带有HTML的表格滚动条中有详细的描述和CSS /代码也在这支笔中:https://codepen.io/sebredhh/pen/QmJvKy
#23 楼
清洁解决方案(仅CSS).table-fixed tbody {
display:block;
height:85vh;
overflow:auto;
}
.table-fixed thead, .table-fixed tbody tr {
display:table;
width:100%;
}
<table class="table table-striped table-fixed">
<thead>
<tr align="center">
<th>Col 1</th>
<th>Col 2</th>
<th>Col 3</th>
<th>Col 4</th>
</tr>
</thead>
<tbody>
<tr>
<td>Content 1</td>
<td>Content 1</td>
<td>Content 1</td>
<td>Content 1</td>
</tr>
<tr>
<td>Longer Content 1</td>
<td>Longer Content 1</td>
<td>Longer Content 1</td>
<td>Longer Content 1</td>
</tr>
</tbody
</table
#24 楼
<style>
thead, tbody
{
display: block;
}
tbody
{
overflow: auto;
height: 100px;
}
th,td
{
width: 120px;
}
</style>
<table class="table table-bordered table-striped">
<thead style="background-color:lightgreen">
<tr>
<th>Id</th><th>Name</th><th>Roll</th>
</tr>
</thead>
<tbody>
<tr>
<td>1</td>
<td>Shahriar</td>
<td>12</td>
</tr>
<tr>
<td>1</td>
<td>Shahriar</td>
<td>12</td>
</tr>
<tr>
<td>1</td>
<td>Shahriar</td>
<td>12</td>
</tr>
<tr>
<td>1</td>
<td>Shahriar</td>
<td>12</td>
</tr>
<tr>
<td>1</td>
<td>Shahriar</td>
<td>12</td>
</tr>
<tr>
<td>1</td>
<td>Shahriar</td>
<td>12</td>
</tr>
<tr>
<td>1</td>
<td>Shahriar</td>
<td>12</td>
</tr>
</tbody>
</table>
#25 楼
像这样将表格放在div内,即可垂直制作可滚动表格。将overflow-y
更改为overflow-x
,以使表格可水平滚动。只需overflow
即可使表格在水平和垂直方向上均可滚动。<div style="overflow-y: scroll;">
<table>
...
</table>
</div>
#26 楼
我通过使用position: sticky
提出了一些仅适用于CSS的解决方案。应该在常绿浏览器上工作。尝试调整浏览器大小。 FF中仍然存在一些布局问题,将在以后进行修复,但至少表标题可以处理垂直和水平滚动。Codepen示例
#27 楼
HTML<!DOCTYPE html>
<html>
<head>
<title>RoboPage</title>
<link rel="stylesheet" type="text/css" href="practice.css">
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
</head>
<body>
<div class="container">
<table class="table">
<thead>
<tr>
<th class="col-md-3 col-sm-3 ">First Name</th>
<th class="col-md-3 col-sm-3 ">Last Name</th>
<th class="col-md-6 col-sm-6 ">E-mail</th>
</tr>
</thead>
<tbody>
<tr>
<td class="col-md-3 col-sm-3">Top Row</td>
<td class="col-md-3 col-sm-3">Doe</td>
<td class="col-md-6 col-sm-6">johndoe@email.com</td>
</tr>
<tr>
<td class="col-md-3 col-sm-3">John</td>
<td class="col-md-3 col-sm-3">Doe</td>
<td class="col-md-6 col-sm-6">johndoe@email.com</td>
</tr>
<tr>
<td class="col-md-3 col-sm-3">John</td>
<td class="col-md-3 col-sm-3">Doe</td>
<td class="col-md-6 col-sm-6">johndoe@email.com</td>
</tr>
<tr>
<td class="col-md-3 col-sm-3">John</td>
<td class="col-md-3 col-sm-3">Doe</td>
<td class="col-md-6 col-sm-6">johndoe@email.com</td>
</tr>
<tr>
<td class="col-md-3 col-sm-3">John</td>
<td class="col-md-3 col-sm-3">Doe</td>
<td class="col-md-6 col-sm-6">johndoe@email.com</td>
</tr>
<tr>
<td class="col-md-3 col-sm-3">John</td>
<td class="col-md-3 col-sm-3">Doe</td>
<td class="col-md-6 col-sm-6">johndoe@email.com</td>
</tr>
</tbody>
</table>
</div>
<script src='practice.js'></script>
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>
</body>
</html>
CSS
thead,tbody,tr,td,th{
display:block;
}
tbody{
height:200px;
overflow-y:auto;
width: 100%;
}
thead > tr > th, tbody > tr > td{
float:left;
}
#28 楼
table {
display: block;
}
thead, tbody {
display: block;
}
tbody {
position: absolute;
height: 150px;
overflow-y: scroll;
}
td, th {
min-width: 100px !important;
height: 25px !important;
overflow:hidden !important;
text-overflow: ellipsis !important;
max-width: 100px !important;
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.0/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/js/bootstrap.min.js"></script>
<div class="container" style="position:fixed;height:180px;overflow-x:scroll;overflow-y:hidden">
<table>
<thead>
<tr>
<th>Col1</th>
<th>Col2</th>
<th>Username</th>
<th>Password</th>
<th>First Name</th>
<th>Last Name</th>
<th>Col16</th>
<th>Col7</th>
<th>Col8</th>
<th>Col9</th>
<th>Col10</th>
<th>Col11</th>
<th>Col12</th>
<th>Col13</th>
<th>Col14</th>
<th>Col15</th>
<th>Col16</th>
<th>Col17</th>
<th>Col18</th>
</tr>
</thead>
<tbody>
</tbody>
<tr>
<td>Title</td>
<td>Long Value</td>
<td>Title</td>
<td>Long Value</td>
<td>Title</td>
<td>Long Value</td>
<td>Title</td>
<td>Long Value</td>
<td>Title</td>
<td>Long Value</td>
<td>Title</td>
<td>Long Value</td>
<td>Title</td>
<td>Long Value</td>
<td>Title</td>
<td>Long Value</td>
<td>Title</td>
<td>Long Value</td>
<td>Title</td>
</tr>
<tr>
<td>Title</td>
<td>Long Value</td>
<td>Title</td>
<td>Long Value</td>
<td>Title</td>
<td>Long Value</td>
<td>Title</td>
<td>Long Value</td>
<td>Title</td>
<td>Long Value</td>
<td>Title</td>
<td>Long Value</td>
<td>Title</td>
<td>Long Value</td>
<td>Title</td>
<td>Long Value</td>
<td>Title</td>
<td>Long Value</td>
<td>Title</td>
</tr>
<tr>
<td>Title</td>
<td>Long Value</td>
<td>Title</td>
<td>Long Value</td>
<td>Title</td>
<td>Long Value</td>
<td>Title</td>
<td>Long Value</td>
<td>Title</td>
<td>Long Value</td>
<td>Title</td>
<td>Long Value</td>
<td>Title</td>
<td>Long Value</td>
<td>Title</td>
<td>Long Value</td>
<td>Title</td>
<td>Long Value</td>
<td>Title</td>
</tr>
<tr>
<td>Title</td>
<td>Long Value</td>
<td>Title</td>
<td>Long Value</td>
<td>Title</td>
<td>Long Value</td>
<td>Title</td>
<td>Long Value</td>
<td>Title</td>
<td>Long Value</td>
<td>Title</td>
<td>Long Value</td>
<td>Title</td>
<td>Long Value</td>
<td>Title</td>
<td>Long Value</td>
<td>Title</td>
<td>Long Value</td>
<td>Title</td>
</tr>
<tr>
<td>Title</td>
<td>Long Value</td>
<td>Title</td>
<td>Long Value</td>
<td>Title</td>
<td>Long Value</td>
<td>Title</td>
<td>Long Value</td>
<td>Title</td>
<td>Long Value</td>
<td>Title</td>
<td>Long Value</td>
<td>Title</td>
<td>Long Value</td>
<td>Title</td>
<td>Long Value</td>
<td>Title</td>
<td>Long Value</td>
<td>Title</td>
</tr>
<tr>
<td>Title</td>
<td>Long Value</td>
<td>Title</td>
<td>Long Value</td>
<td>Title</td>
<td>Long Value</td>
<td>Title</td>
<td>Long Value</td>
<td>Title</td>
<td>Long Value</td>
<td>Title</td>
<td>Long Value</td>
<td>Title</td>
<td>Long Value</td>
<td>Title</td>
<td>Long Value</td>
<td>Title</td>
<td>Long Value</td>
<td>Title</td>
</tr>
<tr>
<td>Title</td>
<td>Long Value</td>
<td>Title</td>
<td>Long Value</td>
<td>Title</td>
<td>Long Value</td>
<td>Title</td>
<td>Long Value</td>
<td>Title</td>
<td>Long Value</td>
<td>Title</td>
<td>Long Value</td>
<td>Title</td>
<td>Long Value</td>
<td>Title</td>
<td>Long Value</td>
<td>Title</td>
<td>Long Value</td>
<td>Title</td>
</tr>
<tr>
<td>Title</td>
<td>Long Value</td>
<td>Title</td>
<td>Long Value</td>
<td>Title</td>
<td>Long Value</td>
<td>Title</td>
<td>Long Value</td>
<td>Title</td>
<td>Long Value</td>
<td>Title</td>
<td>Long Value</td>
<td>Title</td>
<td>Long Value</td>
<td>Title</td>
<td>Long Value</td>
<td>Title</td>
<td>Long Value</td>
<td>Title</td>
</tr>
<tr>
<td>Title</td>
<td>Long Value</td>
<td>Title</td>
<td>Long Value</td>
<td>Title</td>
<td>Long Value</td>
<td>Title</td>
<td>Long Value</td>
<td>Title</td>
<td>Long Value</td>
<td>Title</td>
<td>Long Value</td>
<td>Title</td>
<td>Long Value</td>
<td>Title</td>
<td>Long Value</td>
<td>Title</td>
<td>Long Value</td>
<td>Title</td>
</tr>
<tr>
<td>Title</td>
<td>Long Value</td>
<td>Title</td>
<td>Long Value</td>
<td>Title</td>
<td>Long Value</td>
<td>Title</td>
<td>Long Value</td>
<td>Title</td>
<td>Long Value</td>
<td>Title</td>
<td>Long Value</td>
<td>Title</td>
<td>Long Value</td>
<td>Title</td>
<td>Long Value</td>
<td>Title</td>
<td>Long Value</td>
<td>Title</td>
</tr>
<tr>
<td>Title</td>
<td>Long Value</td>
<td>Title</td>
<td>Long Value</td>
<td>Title</td>
<td>Long Value</td>
<td>Title</td>
<td>Long Value</td>
<td>Title</td>
<td>Long Value</td>
<td>Title</td>
<td>Long Value</td>
<td>Title</td>
<td>Long Value</td>
<td>Title</td>
<td>Long Value</td>
<td>Title</td>
<td>Long Value</td>
<td>Title</td>
</tr>
<tr>
<td>Title</td>
<td>Long Value</td>
<td>Title</td>
<td>Long Value</td>
<td>Title</td>
<td>Long Value</td>
<td>Title</td>
<td>Long Value</td>
<td>Title</td>
<td>Long Value</td>
<td>Title</td>
<td>Long Value</td>
<td>Title</td>
<td>Long Value</td>
<td>Title</td>
<td>Long Value</td>
<td>Title</td>
<td>Long Value</td>
<td>Title</td>
</tr>
<tr>
<td>Title</td>
<td>Long Value</td>
<td>Title</td>
<td>Long Value</td>
<td>Title</td>
<td>Long Value</td>
<td>Title</td>
<td>Long Value</td>
<td>Title</td>
<td>Long Value</td>
<td>Title</td>
<td>Long Value</td>
<td>Title</td>
<td>Long Value</td>
<td>Title</td>
<td>Long Value</td>
<td>Title</td>
<td>Long Value</td>
<td>Title</td>
</tr>
<tr>
<td>Title</td>
<td>Long Value</td>
<td>Title</td>
<td>Long Value</td>
<td>Title</td>
<td>Long Value</td>
<td>Title</td>
<td>Long Value</td>
<td>Title</td>
<td>Long Value</td>
<td>Title</td>
<td>Long Value</td>
<td>Title</td>
<td>Long Value</td>
<td>Title</td>
<td>Long Value</td>
<td>Title</td>
<td>Long Value</td>
<td>Title</td>
</tr>
<tr>
<td>Title</td>
<td>Long Value</td>
<td>Title</td>
<td>Long Value</td>
<td>Title</td>
<td>Long Value</td>
<td>Title</td>
<td>Long Value</td>
<td>Title</td>
<td>Long Value</td>
<td>Title</td>
<td>Long Value</td>
<td>Title</td>
<td>Long Value</td>
<td>Title</td>
<td>Long Value</td>
<td>Title</td>
<td>Long Value</td>
<td>Title</td>
</tr>
<tr>
<td>Title</td>
<td>Long Value</td>
<td>Title</td>
<td>Long Value</td>
<td>Title</td>
<td>Long Value</td>
<td>Title</td>
<td>Long Value</td>
<td>Title</td>
<td>Long Value</td>
<td>Title</td>
<td>Long Value</td>
<td>Title</td>
<td>Long Value</td>
<td>Title</td>
<td>Long Value</td>
<td>Title</td>
<td>Long Value</td>
<td>Title</td>
</tr>
<tr>
<td>Title</td>
<td>Long Value</td>
<td>Title</td>
<td>Long Value</td>
<td>Title</td>
<td>Long Value</td>
<td>Title</td>
<td>Long Value</td>
<td>Title</td>
<td>Long Value</td>
<td>Title</td>
<td>Long Value</td>
<td>Title</td>
<td>Long Value</td>
<td>Title</td>
<td>Long Value</td>
<td>Title</td>
<td>Long Value</td>
<td>Title</td>
</tr>
</table>
</div>`enter code here`
#29 楼
一个没有固定宽度的简单方法:.myTable tbody{
display:block;
overflow:auto;
height:200px;
width:100%;
}
.myTable thead tr{
display:block;
}
源
现在,在onLoad上,调整宽度,只需添加以下jQuery脚本:
$.each($('.myTable tbody tr:nth(0) td'), function(k,v) {
$('.myTable thead th:nth('+k+')').css('width', $(v).css('width'));
});
评论
这有帮助吗? stackoverflow.com/a/17380697/1725764这无疑帮助了我。这里的解决方法jsfiddle.net/T9Bhm/7谢谢
当td高度不匹配时,无法正确处理表格条纹属性。 jsfiddle.net/T9Bhm/4755请参阅添加的td {overflow-wrap:break-word; }我添加的
我认为更好和更老的SO线程被标记为此副本:p stackoverflow.com/questions/17067294 / ...
这回答了你的问题了吗?如何创建带有固定/冻结的左列和可滚动主体的HTML表?