当表格数据通过 jquery 向下滚动时，如何固定表格的标题! table 高度固定
<html>
<body>
<style type="text/css">
<table class="fx">
<tbody>
<tr>
<th>Email ID</th>
<th>Time Taken to complete game (secs)</th>
<th>Email ID</th><th>Time Taken to complete game (secs)</th>
</tr>
</tbody>
</table>
</div>
<table class="data">
<tbody>
<tr>
<td>asd@gmail.com</td>
<td>449</td>
<td>asd@gmail.com</td>
<td>449</td>
</tr>
<tr>
<tr>
<td>sad@gmail.com</td>
<td>449</td><td>asd@gmail.com</td>
<td>449</td>
</tr>
<tr>
<tr>
<td>as@gmail.com</td>
<td>449</td>
<td>asd@gmail.com</td>
<td>449</td>
</tr>
<tr>
</tr>
</tbody>
</table>
table tbody
{
display: block;
height: 262px;
overflow: auto;
}
table {
table-layout: fixed;
height: 100px;
overflow: auto;
padding: 10px;
}
table tr{
background-color: #F5F5F5;
}
table tr:nth-child(odd){
background-color: #eee;
}
table tr:nth-child(even){
background-color: #F5F5F5;
}
table tr td{
padding:10px;
width: 200px;
max-width: 200px;
word-wrap:break-word;
height: auto;
text-align: center;
color:#5d8d5d;
}
.fx{
position: fixed;
top: 0;
left: 0;
}
.fx tr th {
padding:10px;
background-color: #ddd;
width: 200px;
color:#6d4d9d;
text-align: center;
}
.data{
margin-top: 70px;
}
div{
position: relative;
}
*{
margin: 0;
padding: 0;
}
</style>
<div>
</body>
</html>
当表格数据通过 jquery 向下滚动时，如何固定表格的标题! 急需 table 的高度
最佳答案
查看此 LINK
或
你能试试这个吗...
CSS 样式:
<style>
table tbody
{
display: block;
height: 262px;
overflow: auto;
}
table
{
table-layout: fixed;
height: 100px;
overflow: auto;
padding: 0px;
}
table tr
{
background-color: #F5F5F5;
}
table tr:nth-child(odd)
{
background-color: #eee;
}
table tr:nth-child(even)
{
background-color: #F5F5F5;
}
table tr td
{
padding: 0px;
width: 200px;
max-width: 200px;
word-wrap: break-word;
height: auto;
text-align: center;
color: #5d8d5d;
}
.fx
{
position: fixed;
top: 0;
left: 0;
min-width:850px;
width:850px;
}
.fx tr th
{
padding: 10px;
background-color: #ddd;
width: 175px;
min-width: 175px;
color: #6d4d9d;
text-align: center;
}
.data
{
margin-top: 0px;
min-width:850px;
width:850px;
left: 0;
}
.data tr th
{
padding: 10px;
width: 175px;
min-width: 175px;
text-align: center;
}
div
{
position: relative;
}
*
{
margin: 0;
padding: 0;
}
</style>
HTML:
<table class="fx">
<tbody>
<tr>
<th>
Email ID
</th>
<th>
Time Taken to complete game (secs)
</th>
<th>
Email ID
</th>
<th>
Time Taken to complete game (secs)
</th>
</tr>
</tbody>
</table>
<div id="data" style="valign: top; overflow: auto; min-width:850px; height: 100px; margin-top: 60px;
padding-top: 0px">
<table class="data">
<tbody>
<tr>
<th>
asd@gmail.com
</th>
<th>
449
</th>
<th>
asd@gmail.com
</th>
<th>
449
</th>
</tr>
<tr>
<tr>
<th>
sad@gmail.com
</th>
<th>
449
</th>
<th>
asd@gmail.com
</th>
<th>
449
</th>
</tr>
<tr>
<tr>
<th>
as@gmail.com
</th>
<th>
449
</th>
<th>
asd@gmail.com
</th>
<th>
449
</th>
</tr>
<tr>
</tr>
</tbody>
</table>
</div>
关于jquery - 如何固定表头？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/20679256/