如何使用单个滚动条修复双表标题?我有两个表,我正在尝试修复表头,以便在使用单个滚动条滚动时可见。我怎样才能成功呢? Here is my JSFiddle
<div id="tablecontainer">
<table id="lefttable" style="width:120px">
<thead>
<tr>
<th>Firstname</th>
<th>Lastname</th>
</tr>
</thead>
<tbody>
<tr>
<td>Eve</td>
<td>Jackson</td>
</tr>
<tr>
<td>Eve</td>
<td>Jackson</td>
</tr>
<tr>
<td>Eve</td>
<td>Jackson</td>
</tr>
<tr>
<td>Eve</td>
<td>Jackson</td>
</tr>
<tr>
<td>Eve</td>
<td>Jackson</td>
</tr>
<tr>
<td>Eve</td>
<td>Jackson</td>
<tr>
<td>Eve</td>
<td>Jackson</td>
</tr>
<tr>
<td>Eve</td>
<td>Jackson</td>
</tr>
<tr>
<td>Eve</td>
<td>Jackson</td>
</tr>
</tr>
</tbody>
</table>
</div>
答案 0 :(得分:1)
我修改了你的一些代码。
<div id="tablecontainer">
<table id="mytable">
<thead>
<tr>
<th>Firstname</th>
<th>Lastname</th>
</tr>
</thead>
<tbody>
<tr>
<td>Eve</td>
<td>Jackson</td>
</tr>
<tr>
<td>Eve</td>
<td>Jackson</td>
</tr>
<tr>
<td>Eve</td>
<td>Jackson</td>
</tr>
<tr>
<td>Eve</td>
<td>Jackson</td>
</tr>
<tr>
<td>Eve</td>
<td>Jackson</td>
</tr>
<tr>
<td>Eve</td>
<td>Jackson</td>
<tr>
<td>Eve</td>
<td>Jackson</td>
</tr>
<tr>
<td>Eve</td>
<td>Jackson</td>
</tr>
<tr>
<td>Eve</td>
<td>Jackson</td>
</tr>
</tr>
</tbody>
</table>
<table id="mytable">
<thead>
<tr>
<th>Head1</th>
<th>Head2</th>
<th>Head3</th>
<th>Head4</th>
</tr>
</thead>
<tbody>
<tr>
<td>12</td>
<td>13</td>
<td>14</td>
<td>15</td>
</tr>
<tr>
<td>12</td>
<td>13</td>
<td>14</td>
<td>15</td>
</tr>
<tr>
<td>12</td>
<td>13</td>
<td>14</td>
<td>15</td>
</tr>
<tr>
<td>12</td>
<td>13</td>
<td>14</td>
<td>15</td>
</tr>
<tr>
<td>12</td>
<td>13</td>
<td>14</td>
<td>15</td>
</tr>
<tr>
<td>12</td>
<td>13</td>
<td>14</td>
<td>15</td>
<tr>
<td>12</td>
<td>13</td>
<td>14</td>
<td>15</td>
</tr>
<tr>
<td>12</td>
<td>13</td>
<td>14</td>
<td>15</td>
</tr>
<tr>
<td>12</td>
<td>13</td>
<td>14</td>
<td>15</td>
</tr>
</tr>
</tbody>
</table>
<table id="header-fixed"></table>
</div>
body { height: 1000px; }
#header-fixed {
display:none;
position: fixed;
top: 0px;
background-color:white;
}
#mytable {
float:left;
}
#header-fixed thead {
float:left;
}
var tableOffset = $("#mytable").offset().top;
var $header = $("#mytable > thead").clone();
var $fixedHeader = $("#header-fixed").append($header);
$(window).bind("scroll", function() {
var offset = $(this).scrollTop();
if (offset >= tableOffset && $fixedHeader.is(":hidden")) {
$fixedHeader.show();
}
else if (offset < tableOffset) {
$fixedHeader.hide();
}
});
答案 1 :(得分:0)
我修改了你的小提琴请检查..
我已经为header和body使用了不同的表,并将scroll事件绑定到表体。
$("#tablebody").on("scroll",function(){})
答案 2 :(得分:0)
//test you code
#lefttable {
float: left;
margin-right: 15px;
}
#lefttable, #righttable {
padding-top: 15px;
width: 200px;
}
#tablecontainer {
height: 200px;
overflow: scroll;
}
.fixed {
border: 1px solid #FF0000;
position: absolute;
top: 0;
}
th, td {
text-align: left;
}
//test html
<div id="tablecontainer">
<table id="lefttable">
<thead class="fixed">
<tr>
<th>Firstname</th>
<th>Lastname</th>
</tr>
</thead>
<tbody>
<tr>
<td>Eve</td>
<td>Jackson</td>
</tr>
<tr>
<td>Eve</td>
<td>Jackson</td>
</tr>
<tr>
<td>Eve</td>
<td>Jackson</td>
</tr>
<tr>
<td>Eve</td>
<td>Jackson</td>
</tr>
<tr>
<td>Eve</td>
<td>Jackson</td>
</tr>
<tr>
<td>Eve</td>
<td>Jackson</td>
<tr>
<td>Eve</td>
<td>Jackson</td>
</tr>
<tr>
<td>Eve</td>
<td>Jackson</td>
</tr>
<tr>
<td>Eve</td>
<td>Jackson</td>
</tr>
</tr>
</tbody>
</table>
<table id="righttable">
<thead class="fixed">
<tr>
<th>Head1</th>
<th>Head2</th>
<th>Head3</th>
<th>Head4</th>
</tr>
</thead>
<tbody>
<tr>
<td>12</td>
<td>13</td>
<td>14</td>
<td>15</td>
</tr>
<tr>
<td>12</td>
<td>13</td>
<td>14</td>
<td>15</td>
</tr>
<tr>
<td>12</td>
<td>13</td>
<td>14</td>
<td>15</td>
</tr>
</tbody>
</table>
</div>