固定表头，表数据部分做滚动条显示，如何实现？

marine_chen 2006-03-24 09:30:03
我用JSP开发，数据量较大，分页显示后，每页还有30条数据，下面数据需要用IE的滚动条下拉才能看见，但是表的列数较多，很多数据就不知道是对应哪个表头了，所以需要改成表头固定，表的数据设置成滚动条的，用JAVA开发，如何实现呢？
大家多帮忙，急！
...全文
2119 36 打赏 收藏 转发到动态 举报
写回复
用AI写文章
36 条回复
切换为时间正序
请发表友善的回复…
发表回复
haidywei 2006-06-21
  • 打赏
  • 举报
 回复
MARK
yiyioo 2006-03-30
  • 打赏
  • 举报
 回复
不太明白楼主的意思，像下面这样的效果不行吗？


<style type="text/css">
.td_relative {
background-color: #CCCCCC;
top : expression(document.getElementById("dv").scrollTop-1);
position : relative;
z-index : 1
}
</style>
<body>
</table>
<div style="width:800; height:300; overflow:auto;" id="dv">
<table border="1" cellpadding="0" cellspacing="0" id="tb" width="1200">
<tr>
<td class="td_relative">ID</td>
<td class="td_relative">名字</td>
<td class="td_relative">时间</td>
<td class="td_relative">类型</td>
<td class="td_relative">采集类型</td>
<td class="td_relative">标准</td>
<td class="td_relative">得粉碎</td>
<td class="td_relative">xzc在左侧</td>
<td class="td_relative">xzc在左侧</td>
<td class="td_relative">xzc在左侧</td>
<td class="td_relative">xzc在左侧</td>
<td class="td_relative">xzc在左侧</td>
<td class="td_relative">xzc在左侧</td>
<td class="td_relative">地方规定萨发</td>
<td class="td_relative">地方规定萨发</td>
<td class="td_relative">地方规定萨发</td>
<td class="td_relative">电流曲线</td>
<td class="td_relative">似懂非懂司法三分</td>
<td class="td_relative">似懂非懂司法三分</td>
<td class="td_relative">似懂非懂司法三分</td>
<td class="td_relative">似懂非懂司法三分</td>
</tr>
<tr>
<td >xzczc左侧</td>
<td >得粉碎</td>
<td >xzc在左侧</td>
<td >梵蒂冈的地方规定萨发随风倒三大肃反似懂非懂司法三分速度 方法光大给地方 </td>
<td >xzc在左侧</td>
<td >xc在左侧</td>
<td >xzc在左侧</td>
<td >xzc在左侧</td>
<td >xzc在左侧</td>
<td >xzc左侧</td>
<td >xzc在左侧</td>
<td >xzc在左侧</td>
<td >xzc在左侧</td>
<td >xc在左侧</td>
<td >xzc在左侧</td>
<td >xzc在左侧</td>
<td >xzc在左侧</td>
<td >xzc在左侧</td>
<td >xzc在左侧</td>
<td >xz在左侧</td>
<td >xzc在左侧</td>
</tr>
<tr>
<td >xzczc左侧</td>
<td >得粉碎</td>
<td >xzc在左侧</td>
<td >梵蒂冈的地方规定萨发随风倒三大肃反似懂非懂司法三分速度 方法光大给地方 </td>
<td >xzc在左侧</td>
<td >xc在左侧</td>
<td >xzc在左侧</td>
<td >xzc在左侧</td>
<td >xzc在左侧</td>
<td >xzc左侧</td>
<td >xzc在左侧</td>
<td >xzc在左侧</td>
<td >xzc在左侧</td>
<td >xc在左侧</td>
<td >xzc在左侧</td>
<td >xzc在左侧</td>
<td >xzc在左侧</td>
<td >xzc在左侧</td>
<td >xzc在左侧</td>
<td >xz在左侧</td>
<td >xzc在左侧</td>
</tr>
<tr>
<td >xzczc左侧</td>
<td >得粉碎</td>
<td >xzc在左侧</td>
<td >梵蒂冈的地方规定萨发随风倒三大肃反似懂非懂司法三分速度 方法光大给地方 </td>
<td >xzc在左侧</td>
<td >xc在左侧</td>
<td >xzc在左侧</td>
<td >xzc在左侧</td>
<td >xzc在左侧</td>
<td >xzc左侧</td>
<td >xzc在左侧</td>
<td >xzc在左侧</td>
<td >xzc在左侧</td>
<td >xc在左侧</td>
<td >xzc在左侧</td>
<td >xzc在左侧</td>
<td >xzc在左侧</td>
<td >xzc在左侧</td>
<td >xzc在左侧</td>
<td >xz在左侧</td>
<td >xzc在左侧</td>
</tr>
<tr>
<td >xzczc左侧</td>
<td >得粉碎</td>
<td >xzc在左侧</td>
<td >梵蒂冈的地方规定萨发随风倒三大肃反似懂非懂司法三分速度 方法光大给地方 </td>
<td >xzc在左侧</td>
<td >xc在左侧</td>
<td >xzc在左侧</td>
<td >xzc在左侧</td>
<td >xzc在左侧</td>
<td >xzc左侧</td>
<td >xzc在左侧</td>
<td >xzc在左侧</td>
<td >xzc在左侧</td>
<td >xc在左侧</td>
<td >xzc在左侧</td>
<td >xzc在左侧</td>
<td >xzc在左侧</td>
<td >xzc在左侧</td>
<td >xzc在左侧</td>
<td >xz在左侧</td>
<td >xzc在左侧</td>
</tr>
<tr>
<td >xzczc左侧</td>
<td >得粉碎</td>
<td >xzc在左侧</td>
<td >梵蒂冈的地方规定萨发随风倒三大肃反似懂非懂司法三分速度 方法光大给地方 </td>
<td >xzc在左侧</td>
<td >xc在左侧</td>
<td >xzc在左侧</td>
<td >xzc在左侧</td>
<td >xzc在左侧</td>
<td >xzc左侧</td>
<td >xzc在左侧</td>
<td >xzc在左侧</td>
<td >xzc在左侧</td>
<td >xc在左侧</td>
<td >xzc在左侧</td>
<td >xzc在左侧</td>
<td >xzc在左侧</td>
<td >xzc在左侧</td>
<td >xzc在左侧</td>
<td >xz在左侧</td>
<td >xzc在左侧</td>
</tr>
<tr>
<td >xzczc左侧</td>
<td >得粉碎</td>
<td >xzc在左侧</td>
<td >梵蒂冈的地方规定萨发随风倒三大肃反似懂非懂司法三分速度 方法光大给地方 </td>
<td >xzc在左侧</td>
<td >xc在左侧</td>
<td >xzc在左侧</td>
<td >xzc在左侧</td>
<td >xzc在左侧</td>
<td >xzc左侧</td>
<td >xzc在左侧</td>
<td >xzc在左侧</td>
<td >xzc在左侧</td>
<td >xc在左侧</td>
<td >xzc在左侧</td>
<td >xzc在左侧</td>
<td >xzc在左侧</td>
<td >xzc在左侧</td>
<td >xzc在左侧</td>
<td >xz在左侧</td>
<td >xzc在左侧</td>
</tr>
</table>
</div>
</body>
elephant0318 2006-03-29
  • 打赏
  • 举报
 回复
我看了大家都要用DIV来实现~能不能不用DIV呢？
而且在实现业务功能的时候需要表头和数据在一个表格中，如果用DIV的话不能去定义死DIV的高度~
因为这些表格是要做成通用的，而且是放在不同的地方啊~
yiyioo 2006-03-28
  • 打赏
  • 举报
 回复
或者像这种
<style type="text/css">
.td_relative {
background-color: #CCCCCC;
top : expression(document.getElementById("dv").scrollTop-1);
position : relative;
z-index : 1
}
</style>
<body>
</table>
<div style="width:800; height:500; overflow-y:auto;" id="dv">
<table border="1" cellpadding="0" cellspacing="0" id="tb" width="800">
<tr>
<td class="td_relative">ID</td>
<td class="td_relative">名字</td>
<td class="td_relative">时间</td>
<td class="td_relative">类型</td>
<td class="td_relative">采集类型</td>
<td class="td_relative">标准</td>
<td class="td_relative">得粉碎</td>
<td class="td_relative">xzc在左侧</td>
<td class="td_relative">xzc在左侧</td>
<td class="td_relative">xzc在左侧</td>
<td class="td_relative">xzc在左侧</td>
<td class="td_relative">xzc在左侧</td>
<td class="td_relative">xzc在左侧</td>
<td class="td_relative">地方规定萨发</td>
<td class="td_relative">地方规定萨发</td>
<td class="td_relative">地方规定萨发</td>
<td class="td_relative">电流曲线</td>
<td class="td_relative">似懂非懂司法三分</td>
<td class="td_relative">似懂非懂司法三分</td>
<td class="td_relative">似懂非懂司法三分</td>
<td class="td_relative">似懂非懂司法三分</td>
</tr>
<tr>
<td >xzczc左侧</td>
<td >得粉碎</td>
<td >xzc在左侧</td>
<td >梵蒂冈的地方规定萨发随风倒三大肃反似懂非懂司法三分速度 方法光大给地方 </td>
<td >xzc在左侧</td>
<td >xc在左侧</td>
<td >xzc在左侧</td>
<td >xzc在左侧</td>
<td >xzc在左侧</td>
<td >xzc左侧</td>
<td >xzc在左侧</td>
<td >xzc在左侧</td>
<td >xzc在左侧</td>
<td >xc在左侧</td>
<td >xzc在左侧</td>
<td >xzc在左侧</td>
<td >xzc在左侧</td>
<td >xzc在左侧</td>
<td >xzc在左侧</td>
<td >xz在左侧</td>
<td >xzc在左侧</td>
</tr>
</table>
</div>
</body>


把需要固定的td加上td_relative这个样式，然后div的名称和td_relative里的document.getElementById("dv")一样就ok了~``````
yiyioo 2006-03-28
  • 打赏
  • 举报
 回复
按照那种一个一个对齐的方法太麻烦了

你还是用样式吧

就像zhiin(稚鹰@南通)给你的那种~`
mingxuan3000 2006-03-28
  • 打赏
  • 举报
 回复
一个一个的设,慢慢的调整
jjkkdelife 2006-03-28
  • 打赏
  • 举报
 回复
楼主的问题很容易解决,跟你用不用JSP没太大关系,关键在html里的每列表格width设置,设计的正确就没问题了
marine_chen 2006-03-28
  • 打赏
  • 举报
 回复
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">


<style>
.fixed {
position: relative;
background: #ccc;
}
.scroll_layer {
width: 200px;
height: 200px;
overflow-y: scroll;
}
</style>

<div class="scroll_layer">
<table border="1" bordercolor="#0066ff" cellspacing="0" style="width:200px; border-collapse:collapse">
<tr>
<td class="fixed">11</td>
<td class="fixed">header2</td>
<td class="fixed">2</td>
<td class="fixed">333333333333333</td>
<td class="fixed">44444</td>
<td class="fixed">55</td>
<td class="fixed">header1</td>
<td class="fixed">header2</td>
<td class="fixed">header1</td>
<td class="fixed">he55ader2</td>
<td class="fixed">header1</td>
<td class="fixed">hea55der2</td>
<td class="fixed">header1</td>
<td class="fixed">555</td>
<td class="fixed">header1</td>
<td class="fixed">header2</td>
<td class="fixed">header1</td>
<td class="fixed">header2</td>
<td class="fixed">55555</td>
<td class="fixed">header2</td>
<td class="fixed">header2</td>
</tr>
<tr>
<td>body a</td>
<td>body b</td>
<td>body a</td>
<td>body b</td>
<td>body a</td>
<td>body b</td>
<td>body a</td>
<td>body b</td>
<td>body a</td>
<td>body b</td>
<td>body a</td>
<td>body b</td>
<td>body a</td>
<td>body b</td>
<td>body a</td>
<td>body b</td>
<td>body a</td>
<td>body b</td>
<td>body a</td>
<td>body b</td>
<td>body a</td>
</tr>
<tr>
<td>body a</td>
<td>body b</td>
<td>body a</td>
<td>body b</td>
<td>body a</td>
<td>body b</td>
<td>body a</td>
<td>body b</td>
<td>body a</td>
<td>body b</td>
<td>body a</td>
<td>body b</td>
<td>body a</td>
<td>body b</td>
<td>body a</td>
<td>body b</td>
<td>body a</td>
<td>body b</td>
<td>body a</td>
<td>body b</td>
<td>body a</td>
</tr>
<tr>
<td>body a</td>
<td>body b</td>
<td>body a</td>
<td>body b</td>
<td>body a</td>
<td>body b</td>
<td>body a</td>
<td>body b</td>
<td>body a</td>
<td>body b</td>
<td>body a</td>
<td>body b</td>
<td>body a</td>
<td>body b</td>
<td>body a</td>
<td>body b</td>
<td>body a</td>
<td>body b</td>
<td>body a</td>
<td>body b</td>
<td>body a</td>
</tr>
<tr>
<td>body a</td>
<td>body b</td>
<td>body a</td>
<td>body b</td>
<td>body a</td>
<td>body b</td>
<td>body a</td>
<td>body b</td>
<td>body a</td>
<td>body b</td>
<td>body a</td>
<td>body b</td>
<td>body a</td>
<td>body b</td>
<td>body a</td>
<td>body b</td>
<td>body a</td>
<td>body b</td>
<td>body a</td>
<td>body b</td>
<td>body a</td>
</tr>
<tr>
<td>body a</td>
<td>body b</td>
<td>body a</td>
<td>body b</td>
<td>body a</td>
<td>body b</td>
<td>body a</td>
<td>body b</td>
<td>body a</td>
<td>body b</td>
<td>body a</td>
<td>body b</td>
<td>body a</td>
<td>body b</td>
<td>body a</td>
<td>body b</td>
<td>body a</td>
<td>body b</td>
<td>body a</td>
<td>body b</td>
<td>body a</td>
<tr>
<td>body a</td>
<td>body b</td>
<td>body a</td>
<td>body b</td>
<td>body a</td>
<td>body b</td>
<td>body a</td>
<td>body b</td>
<td>body a</td>
<td>body b</td>
<td>body a</td>
<td>body b</td>
<td>body a</td>
<td>body b</td>
<td>body a</td>
<td>body b</td>
<td>body a</td>
<td>body b</td>
<td>body a</td>
<td>body b</td>
<td>body a</td>
</tr>
</table>
</div>


这样可以实现

我现在希望把这个表居中

如何处理呢
marine_chen 2006-03-28
  • 打赏
  • 举报
 回复
我刚才用了zhiin(稚鹰@南通)的方法
数据滚动可以
但是表头也滚动上去了
表头与数据连一体没有分开
这一步如何做呢
marine_chen 2006-03-28
  • 打赏
  • 举报
 回复
TO:yiyioo(天一(日啃一文,月习一类,不求通透,只求半解))

我按照你的方法试了，可以用了，但是表格有一点不对齐，我是设定宽度都为800，然后把td的宽度总和加起来为800设定的。但是有一个显示时间的两边不太对齐，我不知道是怎么回事，宽度改了好几次也不行啊，还有招吗。。。

还有一个问题，表头可以在页面居中，但是下面下拉框是居左，怎么设定到居中与表头对齐呢？
我试了align="center"参数放到div标签或table参数里都不行啊
mingxuan3000 2006-03-27
  • 打赏
  • 举报
 回复
但是我需要把下面数据与上面的表头列对齐

这步如何实现呢

把2个表的长度都固定，当然对齐要你自己慢慢调一下
yiyioo 2006-03-27
  • 打赏
  • 举报
 回复
参考这个吧~~
<style type="text/css">
td{ font-size:12px;}
</style>
<script language="javascript">
function setWidth(tr_id,tb_id)
{
var oTr = document.getElementById(tr_id);
var oTb = document.getElementById(tb_id);
for(i=0;1<oTr.children.length-1;i++)
{
oTr.children(i).children.style.width = oTb.children(0).children(i).style.width;
}

}
</script>
<body onLoad="setWidth('row','tb');">
<table width="350" height="20" border="1" cellpadding="0" cellspacing="0">
<tr id="row">
<td style="width:80">分速</td>
<td width="80">得粉碎</td>
<td width="120">分速120</td>
<td>三</td>
</tr>
</table>
<div style="width:350; height:200; overflow-y:auto;">
<table border="1" cellpadding="0" cellspacing="0" id="tb" width="350">
<tr>
<td style="width:80; height:25;">xzczc在左侧</td>
<td style="width:80; height:25;">xzczc在左侧</td>
<td style="width:120; height:25;">梵蒂冈的地方规定萨发随风倒三大肃反似懂非懂司法三分速度 方法光大给地方 </td>
<td> </td>
</tr>
<tr>
<td height="25">xzczc在左侧</td>
<td><strong>dsad </strong></td>
<td> </td>
<td> </td>
</tr>
<tr>
<td height="25">xzczc在左侧</td>
<td>分速度所担负 </td>
<td> </td>
<td> </td>
</tr>
<tr>
<td height="25">xzczc在左侧</td>
<td>分速度 </td>
<td>发随风倒三</td>
<td> </td>
</tr>
<tr>
<td height="25">xzczc在左侧</td>
<td> </td>
<td> </td>
<td> </td>
</tr>
<tr>
<td height="25">xzczc在左侧</td>
<td> </td>
<td>大法三</td>
<td>分速 </td>
</tr>
<tr>
<td height="25">xzczc在左侧</td>
<td>分速 </td>
<td> </td>
<td> </td>
</tr>
<tr>
<td height="25">xzczc在左侧</td>
<td> </td>
<td> </td>
<td> </td>
</tr>
<tr>
<td height="25">xzczc在左侧</td>
<td> </td>
<td>三 三 </td>
<td> </td>
</tr>
<tr>
<td height="25">xzczc在左侧</td>
<td> </td>
<td> </td>
<td> </td>
</tr>
<tr>
<td height="25">xzczc在左侧</td>
<td>的三</td>
<td>分速度</td>
<td> </td>
</tr>
<tr>
<td height="25">xzczc在左侧</td>
<td> </td>
<td> </td>
<td>三 </td>
</tr>
</table>
</div>
</body>
marine_chen 2006-03-27
  • 打赏
  • 举报
 回复
我这个表的列数较多
表头有21个
就是21列
这个表头的距离和表数据的width如何设置呢
一个一个的设吗
zeroleonhart 2006-03-27
  • 打赏
  • 举报
 回复
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<style type="text/css">
<!--
thead.tbhead th {
border:1px solid #000000;
border-top:none;
padding-left:5px;
white-space:nowrap;
background-color:#99CCFF;
}
div.contb table {
padding:0px;
width:100%;
border:none;
}
div.contb {
margin-left:auto;
margin-right:auto;
width:800px;
height:120px;
overflow:auto;
border:1px solid #000000;
}
.ttr{
z-index:100;
position:relative;
top:expression(document.getElementById("contb").scrollTop);
}
.ttd{
position:relative;
left:expression(document.getElementById("contb").scrollLeft);
}
-->
</style>
<title>test</title>
</head>
<body>
<div class="contb" id="contb">
<table>
<thead class="tbhead">
<tr class="ttr">
<th class="ttd">1</th><th>2</th>...
</tr>
</thead>
<tbody>
<tr><td class="ttd">11</td><td>22</td>...</tr>
<tr>....</tr>
</tbody>
</table>
</div>
</body>
</html>
marine_chen 2006-03-27
  • 打赏
  • 举报
 回复
我照你的思路写了一个
但是上下还没对齐
我的代码如下，帮忙改一下咯：

<style type="text/css">
td{ font-size:12px;}
</style>
<script language="javascript">
function setWidth(tr_id,tb_id)
{
var oTr = document.getElementById(tr_id);
var oTb = document.getElementById(tb_id);
for(i=0;1<oTr.children.length-1;i++)
{
oTr.children(i).style.width = oTb.children(0).children(0).children(i).style.width;
}

}
</script>
<body onLoad="setWidth('row','tb');">
<table width="800" border="1" cellpadding="0" cellspacing="0">
<tr id="row">
<td style="width:20">ID</td>
<td width="30">名字</td>
<td width="30">时间</td>
<td width="40">类型</td>
<td width="30">采集类型</td>
<td width="40">标准</td>
<td width="30">得粉碎</td>
<td width="60">xzc在左侧</td>
<td width="60">xzc在左侧</td>
<td width="60">xzc在左侧</td>
<td width="60">xzc在左侧</td>
<td width="60">xzc在左侧</td>
<td width="60">xzc在左侧</td>
<td width="30">地方规定萨发</td>
<td width="30">地方规定萨发</td>
<td width="30">地方规定萨发</td>
<td width="30">电流曲线</td>
<td width="40">似懂非懂司法三分</td>
<td width="40">似懂非懂司法三分</td>
<td width="40">似懂非懂司法三分</td>
<td width="40">似懂非懂司法三分</td>
</tr>
</table>
<div style="width:800; height:500; overflow-y:auto;">
<table border="1" cellpadding="0" cellspacing="0" id="tb" width="800">
<tr>
<td style="width:20 ">xzczc左侧</td>
<td style="width:30 ">得粉碎</td>
<td style="width:30 ">xzc在左侧</td>
<td style="width:40 ">梵蒂冈的地方规定萨发随风倒三大肃反似懂非懂司法三分速度 方法光大给地方 </td>
<td style="width:30 ">xzc在左侧</td>
<td style="width:40 ">xc在左侧</td>
<td style="width:30 ">xzc在左侧</td>
<td style="width:60 ">xzc在左侧</td>
<td style="width:60 ">xzc在左侧</td>
<td style="width:60 ">xzc左侧</td>
<td style="width:60 ">xzc在左侧</td>
<td style="width:60 ">xzc在左侧</td>
<td style="width:60 ">xzc在左侧</td>
<td style="width:30 ">xc在左侧</td>
<td style="width:30 ">xzc在左侧</td>
<td style="width:30 ">xzc在左侧</td>
<td style="width:30 ">xzc在左侧</td>
<td style="width:40 ">xzc在左侧</td>
<td style="width:40 ">xzc在左侧</td>
<td style="width:40 ">xz在左侧</td>
<td style="width:40 ">xzc在左侧</td>
</tr>

</table>
</div>
</body>
yiyioo 2006-03-27
  • 打赏
  • 举报
 回复
其实那句话应该是这样的
oTr.children(i).style.width = oTb.children(0).children(0).children(i).style.width

写得太匆忙了，有点问题
oTr是指TR对象
oTr.children(i)是指oTr的第i个孩子（从0开始）即TD
oTb是指表格对象
oTb.children(0) 是指表格的第一个孩子即TBody对象
oTb.children(0).children(0)是指TBody的第一个孩子即TR对象
就这样~~`

如果表格设置了宽度，td也设置了宽度，应该会自动换行，不会撑大的吧`~`

nowrap写上就不换行，好象在这里没什么用，头昏了我~~

children在非ie的浏览器里不支持
children可以用childNodes代替

我觉得用层和表格比用两个表格要好~~
marine_chen 2006-03-27
  • 打赏
  • 举报
 回复
等号左面的两个children有一个是i循环
等号右边的两个一个是0，一个是i循环
这个是什么意思呢
mingxuan3000 2006-03-27
  • 打赏
  • 举报
 回复
children
就是他下一级的东西
marine_chen 2006-03-27
  • 打赏
  • 举报
 回复
设置不能换行<td nowrap >
这个如何写呢
marine_chen 2006-03-27
  • 打赏
  • 举报
 回复
oTr.children(i).children.style.width = oTb.children(0).children(i).style.width;

这句两边的childern是什么意思呢
加载更多回复（16）
bootstrap表格固定表头并且tbody部分添加滚动条
bootstrap的tbody加竖向滚动条，而且当前表格的表头。bootstrap的tbody加竖向滚动条，而且当前表格的表头。bootstrap的tbody加竖向滚动条，而且当前表格的表头。
一个table表头固定，内容可滚动的实用例子
一个table表头固定，内容可滚动的实用例子,同时可以实现增加，删除功能
BootStrapTable表格利器通用教材
适用人群开发从业人员，产品原型人员，IT相关从业人员，想快速掌握技能的一切人员课程概述特点基于Bootstrap 开发响应式界面，固定表头，完全可配置，支持data属性，显示/隐藏列，显示/隐藏表头，使用AJAX获取JSON数据，点击表头可简单的进行排序，支持自定义列显示，支持单/复选，强大的分页功能，支持名片布局，支持多语言动态列：导出各种格式（支持xls，xlsx的office2003-office2019）
HTML5_html表格表头固定不滚动内容滚动.rar
HTML5_html表头固定不滚动而内容滚动的效果，表格是基于Div CSS实现的，将表头固定住不滚动，而表格里面的每行数据随滚动条滚动。在显示较多数据时，当用户滚动鼠标中轮时，表格内容会滚动，而表头固定不变，可以将表格内容与表头很好的对应，便于阅读表格内容。
jQuery表头固定和自定义滚动条的表格美化
这次我们要来分享一些关于网页表格数据展示优化的jQuery插件，首先表格的表头是固定的，当数据行比较多时，向下拖动表格行时，也可以清楚地知道每一列数据的意义。其次表格的滚动条时经过美化过的，重写了浏览器自带的滚动条样式，这样让整个数据表格显得更加美观。
CSS

61,111

社区成员

60,734

社区内容

发帖
与我相关
我的任务
社区描述
层叠样式表(英文全称：Cascading Style Sheets)是一种用来表现HTML（标准通用标记语言的一个应用）或XML（标准通用标记语言的一个子集）等文件样式的计算机语言。
社区管理员
  • HTML(CSS)社区
加入社区
  • 近7日
  • 近30日
  • 至今

加载中

查看更多榜单
社区公告
暂无公告

试试用AI创作助手写篇文章吧

+ 用AI写文章