消息关闭
    暂无新消息!

请问一下这种情况怎么实现

问题作者 : 忧郁者2017-08-16发布
下面是代码,我想当数据上下滚动的时候,第一个tr永远显示在最顶部
<table width="300" border="1">
  <tr>
    <th>姓名</th>
    <th>性别</th>
    <th>职业</th>
  </tr>
  <tr>
    <td>内容</td>
    <td>内容</td>
    <td>内容</td>
  </tr>
  <tr>
    <td>内容</td>
    <td>内容</td>
    <td>内容</td>
  </tr>
  下面还有很多很多。。。。。。
</table>

4个回答

︿ 2

<script src="http://cdn.bootcss.com/jquery/3.2.1/jquery.min.js"></script>
<style type="text/css">
table tbody {
    display: block;
    height: 195px;
    overflow-y: scroll;
}

table thead, tbody tr {
    display: table;
    table-layout:fixed;
}

table {
    width: 300px;
    height: 150px;
}
/*总宽度除以总列数等于列宽300/3=100*/
table tr td,th{
text-align: center;
width: 100px;
}
</style>
<table>
<thead>
<th>head1</th>
<th>head2</th>
<th>head3</th>
</thead>
<tbody class='info'></tbody>
</table>
let tr = [];
for(var i = 0; i<10; i++){
tr.push('<tr><td>'+i+'1</td><td>'+i+'2</td><td>'+i+'3</td></tr>');
}
$('.info').html(tr.join(''));
︿ 1
可以在table上方弄个div用来显示标题默认隐藏,当你的页面滚动table被挡就显示div并设置样式position: fixed;