表格标题固定，可滚动主体水平和垂直，单元格宽度可变
[英]Table header fixed, scrollable body horizontal and vertical, variable cell width
问题描述
我意识到这个问题已经在Stack Overflow上问了很多； 但是，在浏览了其中的一些内容之后，我相信我的问题还有一个要求。 我想将常规的html表转换为可以在标题固定的情况下垂直和水平滚动的表。 我项目中的表格是动态生成的，因此无法确定单元格宽度。
问题：
- 左右滚动时，表格滚动，但是页眉被切断
- 标头和主体单元格的宽度不合适
这是一个JSFiddle向您展示我的问题
表示例：
<div class="table-responsive">
<table id="vehicleTable" class="table pointer hover table-striped table-bordered" role="grid">
<thead>
<tr>
<th>Firstname</th>
<th>Lastname</th>
<th>Age</th>
<th>Gender</th>
<th>Size</th>
<th>Mass</th>
<th>Eyecolor</th>
<th>Style</th>
<th>Shoe</th>
<th>Sport</th>
<th>Social Media</th>
</tr>
</thead>
<tbody>
<tr>
<td>Jill</td>
<td>Smith</td>
<td>50</td>
<td>Female</td>
<td>1.60</td>
<td>60</td>
<td>Green</td>
<td>Cool</td>
<td>New Balance</td>
<td>Football</td>
<td>Facebook</td>
</tr>
<tr>
<td>Anthony</td>
<td>Meyer</td>
<td>34</td>
<td>Male</td>
<td>1.84</td>
<td>88</td>
<td>Blue</td>
<td>Elegant</td>
<td>All stars</td>
<td>Golf</td>
<td>Facebook</td>
</tr>
<tr>
<td>Eve</td>
<td>Jackson</td>
<td>94</td>
<td>Female</td>
<td>1.58</td>
<td>55</td>
<td>Green</td>
<td>Cool</td>
<td>Adidas</td>
<td>Chess</td>
<td>Instagram</td>
</tr>
<tr>
<td>Jill</td>
<td>Smith</td>
<td>50</td>
<td>Female</td>
<td>1.60</td>
<td>60</td>
<td>Green</td>
<td>Cool</td>
<td>New Balance</td>
<td>Chess</td>
<td>Instagram</td>
</tr>
<tr>
<td>Anthony</td>
<td>Meyer</td>
<td>34</td>
<td>Male</td>
<td>1.84</td>
<td>88</td>
<td>Blue</td>
<td>Elegant</td>
<td>All stars</td>
<td>Chess</td>
<td>Instagram</td>
</tr>
<tr>
<td>Eve</td>
<td>Jackson</td>
<td>94</td>
<td>Female</td>
<td>1.58</td>
<td>55</td>
<td>Green</td>
<td>Cool</td>
<td>Adidas</td>
<td>Chess</td>
<td>Instagram</td>
</tr>
<tr>
<td>Anthony</td>
<td>Meyer</td>
<td>34</td>
<td>Male</td>
<td>1.84</td>
<td>88</td>
<td>Blue</td>
<td>Elegant</td>
<td>All stars</td>
<td>Golf</td>
<td>Facebook</td>
</tr>
<tr>
<td>Eve</td>
<td>Jackson</td>
<td>94</td>
<td>Female</td>
<td>1.58</td>
<td>55</td>
<td>Green</td>
<td>Cool</td>
<td>Adidas</td>
<td>Chess</td>
<td>Instagram</td>
</tr>
<tr>
<td>Jill</td>
<td>Smith</td>
<td>50</td>
<td>Female</td>
<td>1.60</td>
<td>60</td>
<td>Green</td>
<td>Cool</td>
<td>New Balance</td>
<td>Chess</td>
<td>Instagram</td>
</tr>
<tr>
<td>Anthony</td>
<td>Meyer</td>
<td>34</td>
<td>Male</td>
<td>1.84</td>
<td>88</td>
<td>Blue</td>
<td>Elegant</td>
<td>All stars</td>
<td>Chess</td>
<td>Instagram</td>
</tr>
<tr>
<td>Eve</td>
<td>Jackson</td>
<td>94</td>
<td>Female</td>
<td>1.58</td>
<td>55</td>
<td>Green</td>
<td>Cool</td>
<td>Adidas</td>
<td>Chess</td>
<td>Instagram</td>
</tr>
<tr>
<td>Jill</td>
<td>Smith</td>
<td>50</td>
<td>Female</td>
<td>1.60</td>
<td>60</td>
<td>Green</td>
<td>Cool</td>
<td>New Balance</td>
<td>Chess</td>
<td>Instagram</td>
</tr>
<tr>
<td>Anthony</td>
<td>Meyer</td>
<td>34</td>
<td>Male</td>
<td>1.84</td>
<td>88</td>
<td>Blue</td>
<td>Elegant</td>
<td>All stars</td>
<td>Chess</td>
<td>Instagram</td>
</tr>
<tr>
<td>Eve</td>
<td>Jackson</td>
<td>94</td>
<td>Female</td>
<td>1.58</td>
<td>55</td>
<td>Green</td>
<td>Cool</td>
<td>Adidas</td>
<td>Chess</td>
<td>Instagram</td>
</tr>
</tbody>
</table>
</div>
CSS：
table#vehicleTable {
position: relative;
display: block;
margin-left: 0px;
width: 400px;
height: 400px;
table-layout: fixed;
}
table#vehicleTable thead {
position: relative;
display: block; /*seperates the header from the body allowing it to be positioned*/
width: inherit;
overflow-y: hidden;
overflow-x: hidden;
background-color: blue;
color: white;
}
table#vehicleTable tbody {
position: relative;
display: block; /*seperates the tbody from the header*/
width: inherit;
max-height: 400px;
height: 400px;
overflow-y: scroll;
overflow-x: scroll;
}
.table-responsive {
display: block;
height: 400px;
table-layout: fixed;
}
table#vehicleTable td, table#vehicleTable thead th {
table-layout: fixed;
}
JQuery的：
$(document).ready(function () {
$('tbody').scroll(function (e) {
$('thead').css("left", -$("tbody").scrollLeft());
$('thead th div:nth-child(1)').css("left", $("tbody").scrollLeft());
$('tbody td:nth-child(1)').css("left", $("tbody").scrollLeft());
});
});
1 个解决方案
解决方案1
1 已采纳 2018-02-15 14:27:31
编辑以处理更长列的可能性，因为我没有注意到先决条件
有趣的问题！
如果您愿意
为列设置固定宽度，则可以
使用更少的CSS
而不使用
来实现
jQuery
所需的功能：
如果您确保设置了CSS，以使默认列宽与任何表头所必需的一样长，则此解决方案应该有效：
CSS
table#vehicleTable {
position: relative;
display: block;
margin-left: 0px;
width: 400px;
height: 400px;
overflow-x: scroll;
overflow-y: hidden;
}
table#vehicleTable thead {
background-color: blue;
color: white;
}
table#vehicleTable tbody {
position: relative;
display: inline-block;
height: 345px; /*allowing for scrollbar and th height */
overflow-y: scroll;
}
table#vehicleTable td, table#vehicleTable th {
min-width: 100px; /*suitable width for all column headers in the example*/
}
/*Added this just to handle the 2nd column, which needs to be smaller, as per comments */
table#vehicleTable td:nth-of-type(2), table#vehicleTable th:nth-of-type(2) {
min-width: 30px;
text-align: center;
}
jQuery的
$(window).on('load', function () {
$i = 0;
$("#vehicleTable tbody tr:first-of-type td").each(function()
{
$i++;
width = $(this).outerWidth();
$("#vehicleTable thead th:nth-of-type(" +$i+")").css({"min-width": width+"px"});
});
});
这将遍历tbody的第一row ，并获得每一列的相应宽度。 如果您不首先在它们上设置min-width ，那么任何数据比列标题短的列都会导致该列缩小，而标题本身仍将扩展以适合其自身的内容。
还更新了JSFiddle
具有水平和垂直滚动主体的固定表头
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.