表头固定的前提下表格添加纵向滚动条
作者：互联网
有时候在不分页且数据多的时候就需要滚动条，或者说是下拉加载的时候也需要滚动条，但是希望在滚动的时候数据的表头固定便于理解表体。
如下:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style>
table {
border-collapse: collapse;
width: 100%;
text-align: left;
border:1px solid #000;
}
td,th{
border:1px solid #000;
}
tbody{
display: block;
overflow-x: hidden;
overflow-y: auto;
height: 100px;
}
thead,tbody tr{
display: table;
width: 100%;
table-layout: fixed;
word-break: break-all;
}
table thead{
width: calc(100% - 17px);
}
</style>
</head>
<body>
<div style="height: 250px;"></div>
<div style="height: 250px;"></div>
<table cellspacing="0" cellpadding="0">
<thead>
<th>表头1</th>
<th>表头2</th>
<th>表头3</th>
<th>表头4</th>
<th>表头5</th>
</thead>
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
<td>4</td>
<td>5</td>
</tr>
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
<td>4</td>
<td>5</td>
</tr>
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
<td>4</td>
<td>5</td>
</tr>
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
<td>4</td>
<td>5</td>
</tr>
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
<td>4</td>
<td>5</td>
</tr>
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
<td>4</td>
<td>5</td>
</tr>
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
<td>4</td>
<td>5</td>
</tr>
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
<td>4</td>
<td>5</td>
</tr>
</table>
</body>
</html>
结果:
有时候需要根据屏幕可用高度来动态设置表格的高度和表头的宽度:(也就是可用宽度不足以显示内容的时候将tbody定高，并且将thead的宽度减去滚动条的宽度使得上下对齐)
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style>
table {
border-collapse: collapse;
width: 100%;
text-align: left;
border: 1px solid #000;
}
td,
th {
border: 1px solid #000;
}
tbody {
display: block;
overflow-x: hidden;
overflow-y: auto;
}
thead,
tbody tr {
display: table;
width: 100%;
table-layout: fixed;
word-break: break-all;
}
</style>
<script src="../js/jquery-1.8.3.min.js"></script>
</head>
<body>
<div style="height: 250px;"></div>
<div style="height: 250px;"></div>
<div id="tebleDiv">
<table cellspacing="0" cellpadding="0">
<thead>
<th>表头1</th>
<th>表头2</th>
<th>表头3</th>
<th>表头4</th>
<th>表头5</th>
</thead>
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
<td>4</td>
<td>5</td>
</tr>
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
<td>4</td>
<td>5</td>
</tr>
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
<td>4</td>
<td>5</td>
</tr>
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
<td>4</td>
<td>5</td>
</tr>
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
<td>4</td>
<td>5</td>
</tr>
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
<td>4</td>
<td>5</td>
</tr>
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
<td>4</td>
<td>5</td>
</tr>
</table>
</div>
</body>
</html>
<script>
$(function() {
var windowHeight = $(window).height(); //窗口可用高度
var topValue = $("#tebleDiv").offset().top;
var tebleDivHeight = $("#tebleDiv").height();
if (parseFloat(topValue) + parseFloat(tebleDivHeight) + 180 < parseFloat(windowHeight)) {
return;
}
var realHeight = windowHeight - topValue -50;
$("table tbody").css("height", realHeight + "px");
$("table thead").css("width", ($("table thead").width() - 18) + "px");
});
</script>
结果:
标签：表格,tbody,表头,滚动条,width,table,border,thead 来源： https://www.cnblogs.com/qlqwjy/p/10636180.html