table固定表头和第一行，其他行可以随滚动条滚动！！！如何解？急求！
0
悬赏园豆：10
[已关闭问题]
关闭于 2017-11-21 09:26
做一个Table，使其表头和第一行固定，其他行根随滚动条滚动，如何写，请各位大神附上代码！！！！！！！！
所有回答(5)
0
http://www.fixedheadertable.com/
大神，有没有原生Js写的，出于某些原因，不能引入其他库
1
两个table覆盖在一起。
那，如果一行中显现的列比较多，就会出现横向的滚动条，两个table就会用两个滚动条，而且会很不和谐
@木子火日立: 滚动条的位置，先预留好。行列锁定一般都需要重叠table。
0
<table class="" >
<thead>
<tr>
<th>任务名称</th>
<th>创建人</th>
<th>内容</th>
</tr>
</thead>
<tbody>
<tr>
<td colspan="3">
<div style="height:200px;overflow-y:auto;">
<table>
<tr><td>1</td><td>2</td><td>3</td></tr>
</table>
</div>
</td>
</tr>
</tbody>
</table>
思路大概如此，在数据展示的表格地方用一个容器套起来，做滚动条用
0
<!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/> <title>首页</title> <style type="text/css"> html, body { margin: 0; padding: 0; height: 100%; } table { text-align: center; border: 0; border-collapse: collapse; border-spacing: 0; position: relative;} .content { width: 960px; margin: 0 auto; position: relative; height: 100%;} .wrapper { position:absolute; top:40px; right:0; bottom:0; left:0; overflow: scroll; } .table,.table_title { width: 6000px; line-height: 30px; } .table tr:nth-child(2n-1) { background-color: gray; } .table tr:nth-child(2n) { background-color: orange; } .title { width:960px; height:40px; overflow:hidden; } .table_title tr { line-height: 40px; background-color: black; color: white; } </style> </head> <body> <div class="content"> <div class="title"> <table class="table_title"> <tr> <td>fdf88</td> <td>dfdfddf</td> <td>fdf</td> <td>ffd</td> <td>fd df</td> <td>fdf</td> <td>ddf</td> <td></td> </tr> </table> </div> <div class="wrapper"> <table class="table"> <tr> <td>fdf</td> <td>dfdfddf</td> <td>fdf</td> <td>ffd</td> <td>fd df</td> <td>fdf</td> <td>ddf</td> <td></td> </tr> <tr> <td>fdf</td> <td>dfdfddf</td> <td>fdf</td> <td>ffd</td> <td>fd df</td> <td>fdf</td> <td>ddf</td> <td></td> </tr> <tr> <td>fdf</td> <td>dfdfddf</td> <td>fdf</td> <td>ffd</td> <td>fd df</td> <td>fdf</td> <td>ddf</td> <td></td> </tr> <tr> <td>fdf</td> <td>dfdfddf</td> <td>fdf</td> <td>ffd</td> <td>fd df</td> <td>fdf</td> <td>ddf</td> <td></td> </tr> <tr> <td>fdf</td> <td>dfdfddf</td> <td>fdf</td> <td>ffd</td> <td>fd df</td> <td>fdf</td> <td>ddf</td> <td></td> </tr> <tr> <td>fdf</td> <td>dfdfddf</td> <td>fdf</td> <td>ffd</td> <td>fd df</td> <td>fdf</td> <td>ddf</td> <td></td> </tr> <tr> <td>fdf</td> <td>dfdfddf</td> <td>fdf</td> <td>ffd</td> <td>fd df</td> <td>fdf</td> <td>ddf</td> <td></td> </tr> <tr> <td>fdf</td> <td>dfdfddf</td> <td>fdf</td> <td>ffd</td> <td>fd df</td> <td>fdf</td> <td>ddf</td> <td></td> </tr> <tr> <td>fdf</td> <td>dfdfddf</td> <td>fdf</td> <td>ffd</td> <td>fd df</td> <td>fdf</td> <td>ddf</td> <td></td> </tr> <tr> <td>fdf</td> <td>dfdfddf</td> <td>fdf</td> <td>ffd</td> <td>fd df</td> <td>fdf</td> <td>ddf</td> <td></td> </tr> <tr> <td>fdf</td> <td>dfdfddf</td> <td>fdf</td> <td>ffd</td> <td>fd df</td> <td>fdf</td> <td>ddf</td> <td></td> </tr> <tr> <td>fdf</td> <td>dfdfddf</td> <td>fdf</td> <td>ffd</td> <td>fd df</td> <td>fdf</td> <td>ddf</td> <td></td> </tr> <tr> <td>fdf</td> <td>dfdfddf</td> <td>fdf</td> <td>ffd</td> <td>fd df</td> <td>fdf</td> <td>ddf</td> <td></td> </tr> <tr> <td>fdf</td> <td>dfdfddf</td> <td>fdf</td> <td>ffd</td> <td>fd df</td> <td>fdf</td> <td>ddf</td> <td></td> </tr> <tr> <td>fdf</td> <td>dfdfddf</td> <td>fdf</td> <td>ffd</td> <td>fd df</td> <td>fdf</td> <td>ddf</td> <td></td> </tr> <tr> <td>fdf</td> <td>dfdfddf</td> <td>fdf</td> <td>ffd</td> <td>fd df</td> <td>fdf</td> <td>ddf</td> <td></td> </tr> <tr> <td>fdf</td> <td>dfdfddf</td> <td>fdf</td> <td>ffd</td> <td>fd df</td> <td>fdf</td> <td>ddf</td> <td></td> </tr> <tr> <td>fdf</td> <td>dfdfddf</td> <td>fdf</td> <td>ffd</td> <td>fd df</td> <td>fdf</td> <td>ddf</td> <td></td> </tr> <tr> <td>fdf</td> <td>dfdfddf</td> <td>fdf</td> <td>ffd</td> <td>fd df</td> <td>fdf</td> <td>ddf</td> <td></td> </tr> <tr> <td>fdf</td> <td>dfdfddf</td> <td>fdf</td> <td>ffd</td> <td>fd df</td> <td>fdf</td> <td>ddf</td> <td></td> </tr> <tr> <td>fdf</td> <td>dfdfddf</td> <td>fdf</td> <td>ffd</td> <td>fd df</td> <td>fdf</td> <td>ddf</td> <td></td> </tr> <tr> <td>fdf</td> <td>dfdfddf</td> <td>fdf</td> <td>ffd</td> <td>fd df</td> <td>fdf</td> <td>ddf</td> <td></td> </tr> <tr> <td>fdf</td> <td>dfdfddf</td> <td>fdf</td> <td>ffd</td> <td>fd df</td> <td>fdf</td> <td>ddf</td> <td></td> </tr> <tr> <td>fdf</td> <td>dfdfddf</td> <td>fdf</td> <td>ffd</td> <td>fd df</td> <td>fdf</td> <td>ddf</td> <td></td> </tr> <tr> <td>fdf</td> <td>dfdfddf</td> <td>fdf</td> <td>ffd</td> <td>fd df</td> <td>fdf</td> <td>ddf</td> <td></td> </tr> <tr> <td>fdf</td> <td>dfdfddf</td> <td>fdf</td> <td>ffd</td> <td>fd df</td> <td>fdf</td> <td>ddf</td> <td></td> </tr> <tr> <td>fdf</td> <td>dfdfddf</td> <td>fdf</td> <td>ffd</td> <td>fd df</td> <td>fdf</td> <td>ddf</td> <td></td> </tr> <tr> <td>fdf</td> <td>dfdfddf</td> <td>fdf</td> <td>ffd</td> <td>fd df</td> <td>fdf</td> <td>ddf</td> <td></td> </tr> <tr> <td>fdf</td> <td>dfdfddf</td> <td>fdf</td> <td>ffd</td> <td>fd df</td> <td>fdf</td> <td>ddf</td> <td></td> </tr> <tr> <td>fdf</td> <td>dfdfddf</td> <td>fdf</td> <td>ffd</td> <td>fd df</td> <td>fdf</td> <td>ddf</td> <td></td> </tr> <tr> <td>fdf</td> <td>dfdfddf</td> <td>fdf</td> <td>ffd</td> <td>fd df</td> <td>fdf</td> <td>ddf</td> <td></td> </tr> <tr> <td>fdf</td> <td>dfdfddf</td> <td>fdf</td> <td>ffd</td> <td>fd df</td> <td>fdf</td> <td>ddf</td> <td></td> </tr> <tr> <td>fdf</td> <td>dfdfddf</td> <td>fdf</td> <td>ffd</td> <td>fd df</td> <td>fdf</td> <td>ddf</td> <td></td> </tr> <tr> <td>fdf</td> <td>dfdfddf</td> <td>fdf</td> <td>ffd</td> <td>fd df</td> <td>fdf</td> <td>ddf</td> <td></td> </tr> <tr> <td>fdf</td> <td>dfdfddf</td> <td>fdf</td> <td>ffd</td> <td>fd df</td> <td>fdf</td> <td>ddf</td> <td></td> </tr> <tr> <td>fdf</td> <td>dfdfddf</td> <td>fdf</td> <td>ffd</td> <td>fd df</td> <td>fdf</td> <td>ddf</td> <td></td> </tr> <tr> <td>fdf</td> <td>dfdfddf</td> <td>fdf</td> <td>ffd</td> <td>fd df</td> <td>fdf</td> <td>ddf</td> <td></td> </tr> <tr> <td>fdf</td> <td>dfdfddf</td> <td>fdf</td> <td>ffd</td> <td>fd df</td> <td>fdf</td> <td>ddf</td> <td></td> </tr> <tr> <td>fdf</td> <td>dfdfddf</td> <td>fdf</td> <td>ffd</td> <td>fd df</td> <td>fdf</td> <td>ddf</td> <td></td> </tr> <tr> <td>fdf</td> <td>dfdfddf</td> <td>fdf</td> <td>ffd</td> <td>fd df</td> <td>fdf</td> <td>ddf</td> <td></td> </tr> <tr> <td>fdf</td> <td>dfdfddf</td> <td>fdf</td> <td>ffd</td> <td>fd df</td> <td>fdf</td> <td>ddf</td> <td></td> </tr> <tr> <td>fdf</td> <td>dfdfddf</td> <td>fdf</td> <td>ffd</td> <td>fd df</td> <td>fdf</td> <td>ddf</td> <td></td> </tr> <tr> <td>fdf</td> <td>dfdfddf</td> <td>fdf</td> <td>ffd</td> <td>fd df</td> <td>fdf</td> <td>ddf</td> <td></td> </tr> <tr> <td>fdf</td> <td>dfdfddf</td> <td>fdf</td> <td>ffd</td> <td>fd df</td> <td>fdf</td> <td>ddf</td> <td></td> </tr> <tr> <td>fdf</td> <td>dfdfddf</td> <td>fdf</td> <td>ffd</td> <td>fd df</td> <td>fdf</td> <td>ddf</td> <td></td> </tr> <tr> <td>fdf</td> <td>dfdfddf</td> <td>fdf</td> <td>ffd</td> <td>fd df</td> <td>fdf</td> <td>ddf</td> <td></td> </tr> <tr> <td>fdf</td> <td>dfdfddf</td> <td>fdf</td> <td>ffd</td> <td>fd df</td> <td>fdf</td> <td>ddf</td> <td></td> </tr> <tr> <td>fdf</td> <td>dfdfddf</td> <td>fdf</td> <td>ffd</td> <td>fd df</td> <td>fdf</td> <td>ddf</td> <td></td> </tr> <tr> <td>fdf</td> <td>dfdfddf</td> <td>fdf</td> <td>ffd</td> <td>fd df</td> <td>fdf</td> <td>ddf</td> <td></td> </tr> <tr> <td>fdf</td> <td>dfdfddf</td> <td>fdf</td> <td>ffd</td> <td>fd df</td> <td>fdf</td> <td>ddf</td> <td></td> </tr> <tr> <td>fdf</td> <td>dfdfddf</td> <td>fdf</td> <td>ffd</td> <td>fd df</td> <td>fdf</td> <td>ddf</td> <td></td> </tr> <tr> <td>fdf</td> <td>dfdfddf</td> <td>fdf</td> <td>ffd</td> <td>fd df</td> <td>fdf</td> <td>ddf</td> <td></td> </tr> <tr> <td>fdf</td> <td>dfdfddf</td> <td>fdf</td> <td>ffd</td> <td>fd df</td> <td>fdf</td> <td>ddf</td> <td></td> </tr> <tr> <td>fdf</td> <td>dfdfddf</td> <td>fdf</td> <td>ffd</td> <td>fd df</td> <td>fdf</td> <td>ddf</td> <td></td> </tr> <tr> <td>fdf</td> <td>dfdfddf</td> <td>fdf</td> <td>ffd</td> <td>fd df</td> <td>fdf</td> <td>ddf</td> <td></td> </tr> <tr> <td>fdf</td> <td>dfdfddf</td> <td>fdf</td> <td>ffd</td> <td>fd df</td> <td>fdf</td> <td>ddf</td> <td></td> </tr> <tr> <td>fdf</td> <td>dfdfddf</td> <td>fdf</td> <td>ffd</td> <td>fd df</td> <td>fdf</td> <td>ddf</td> <td></td> </tr> <tr> <td>fdf</td> <td>dfdfddf</td> <td>fdf</td> <td>ffd</td> <td>fd df</td> <td>fdf</td> <td>ddf</td> <td></td> </tr> <tr> <td>fdf</td> <td>dfdfddf</td> <td>fdf</td> <td>ffd</td> <td>fd df</td> <td>fdf</td> <td>ddf</td> <td></td> </tr> <tr> <td>fdf</td> <td>dfdfddf</td> <td>fdf</td> <td>ffd</td> <td>fd df</td> <td>fdf</td> <td>ddf</td> <td></td> </tr> <tr> <td>fdf</td> <td>dfdfddf</td> <td>fdf</td> <td>ffd</td> <td>fd df</td> <td>fdf</td> <td>ddf</td> <td></td> </tr> <tr> <td>fdf</td> <td>dfdfddf</td> <td>fdf</td> <td>ffd</td> <td>fd df</td> <td>fdf</td> <td>ddf</td> <td></td> </tr> <tr> <td>fdf</td> <td>dfdfddf</td> <td>fdf</td> <td>ffd</td> <td>fd df</td> <td>fdf</td> <td>ddf</td> <td></td> </tr> <tr> <td>fdf</td> <td>dfdfddf</td> <td>fdf</td> <td>ffd</td> <td>fd df</td> <td>fdf</td> <td>ddf</td> <td></td> </tr> <tr> <td>fdf</td> <td>dfdfddf</td> <td>fdf</td> <td>ffd</td> <td>fd df</td> <td>fdf</td> <td>ddf</td> <td></td> </tr> <tr> <td>fdf</td> <td>dfdfddf</td> <td>fdf</td> <td>ffd</td> <td>fd df</td> <td>fdf</td> <td>ddf</td> <td></td> </tr> <tr> <td>fdf</td> <td>dfdfddf</td> <td>fdf</td> <td>ffd</td> <td>fd df</td> <td>fdf</td> <td>ddf</td> <td></td> </tr> <tr> <td>fdf</td> <td>dfdfddf</td> <td>fdf</td> <td>ffd</td> <td>fd df</td> <td>fdf</td> <td>ddf</td> <td></td> </tr> <tr> <td>fdf</td> <td>dfdfddf</td> <td>fdf</td> <td>ffd</td> <td>fd df</td> <td>fdf</td> <td>ddf</td> <td></td> </tr> <tr> <td>fdf</td> <td>dfdfddf</td> <td>fdf</td> <td>ffd</td> <td>fd df</td> <td>fdf</td> <td>ddf</td> <td></td> </tr> <tr> <td>fdf</td> <td>dfdfddf</td> <td>fdf</td> <td>ffd</td> <td>fd df</td> <td>fdf</td> <td>ddf</td> <td></td> </tr> <tr> <td>fdf</td> <td>dfdfddf</td> <td>fdf</td> <td>ffd</td> <td>fd df</td> <td>fdf</td> <td>ddf</td> <td></td> </tr> <tr> <td>fdf</td> <td>dfdfddf</td> <td>fdf</td> <td>ffd</td> <td>fd df</td> <td>fdf</td> <td>ddf</td> <td></td> </tr> <tr> <td>fdf</td> <td>dfdfddf</td> <td>fdf</td> <td>ffd</td> <td>fd df</td> <td>fdf</td> <td>ddf</td> <td></td> </tr> <tr> <td>fdf</td> <td>dfdfddf</td> <td>fdf</td> <td>ffd</td> <td>fd df</td> <td>fdf</td> <td>ddf</td> <td></td> </tr> <tr> <td>fdf</td> <td>dfdfddf</td> <td>fdf</td> <td>ffd</td> <td>fd df</td> <td>fdf</td> <td>ddf</td> <td></td> </tr> <tr> <td>fdf</td> <td>dfdfddf</td> <td>fdf</td> <td>ffd</td> <td>fd df</td> <td>fdf</td> <td>ddf</td> <td></td> </tr> <tr> <td>fdf</td> <td>dfdfddf</td> <td>fdf</td> <td>ffd</td> <td>fd df</td> <td>fdf</td> <td>ddf</td> <td></td> </tr> <tr> <td>fdf</td> <td>dfdfddf</td> <td>fdf</td> <td>ffd</td> <td>fd df</td> <td>fdf</td> <td>ddf</td> <td></td> </tr> <tr> <td>fdf</td> <td>dfdfddf</td> <td>fdf</td> <td>ffd</td> <td>fd df</td> <td>fdf</td> <td>ddf</td> <td></td> </tr> <tr> <td>fdf</td> <td>dfdfddf</td> <td>fdf</td> <td>ffd</td> <td>fd df</td> <td>fdf</td> <td>ddf</td> <td></td> </tr> <tr> <td>fdf</td> <td>dfdfddf</td> <td>fdf</td> <td>ffd</td> <td>fd df</td> <td>fdf</td> <td>ddf</td> <td></td> </tr> <tr> <td>fdf</td> <td>dfdfddf</td> <td>fdf</td> <td>ffd</td> <td>fd df</td> <td>fdf</td> <td>ddf</td> <td></td> </tr> <tr> <td>fdf</td> <td>dfdfddf</td> <td>fdf</td> <td>ffd</td> <td>fd df</td> <td>fdf</td> <td>ddf</td> <td></td> </tr> <tr> <td>fdf</td> <td>dfdfddf</td> <td>fdf</td> <td>ffd</td> <td>fd df</td> <td>fdf</td> <td>ddf</td> <td></td> </tr> <tr> <td>fdf</td> <td>dfdfddf</td> <td>fdf</td> <td>ffd</td> <td>fd df</td> <td>fdf</td> <td>ddf</td> <td></td> </tr> <tr> <td>fdf</td> <td>dfdfddf</td> <td>fdf</td> <td>ffd</td> <td>fd df</td> <td>fdf</td> <td>ddf</td> <td></td> </tr> <tr> <td>fdf</td> <td>dfdfddf</td> <td>fdf</td> <td>ffd</td> <td>fd df</td> <td>fdf</td> <td>ddf</td> <td></td> </tr> <tr> <td>fdf</td> <td>dfdfddf</td> <td>fdf</td> <td>ffd</td> <td>fd df</td> <td>fdf</td> <td>ddf</td> <td></td> </tr> <tr> <td>fdf</td> <td>dfdfddf</td> <td>fdf</td> <td>ffd</td> <td>fd df</td> <td>fdf</td> <td>ddf</td> <td></td> </tr> </table> </div> </div> <script type="text/javascript"> document.querySelector(".wrapper").onscroll = function () { // console.log(this.scrollLeft + " " + this.scrollY); document.querySelector(".title").scrollLeft = this.scrollLeft; } </script> </body> </html>
你试试这个，我也是在网上看到的。
0
overflow：可以控制你说的滚动还是固定的问题
