我有一个可水平和垂直滚动的div。问题是我的标题扩展到相当远的水平,因为它是一个有很多列的表头。我希望能够在桌面上向左和向右滚动,但是滚动垂直并始终将该标题保持在顶部,但是可以随时向左滚动并显示标题的其余部分。我在网上找到了一些javascript示例,但我没有看到如何在div中执行此操作,我尝试将它们合并但不起作用。
任何人都可以帮我吗?
<div style = "margin:20px 0px 7px 15px">
<strong>  Audit Log:</strong>
<div style="width:750px; height:580px; border-width:1px; border-style:solid; border-color:#000; background: #bbb">
<div style="margin:20px 0px 0px 12px">
<div class="container">
<div class="heading">
<table>
<tr>
<th style="width:160px">Time:</th>
<th style="width:210px">Source:</th>
<th style="width:75px">Category:</th>
<th style="width:90px">Ssa Admin:</th>
<th style="width:85px">UserID:</th>
<th style="width:50px">Action:</th>
</tr>
</table>
</div>
<div wicket:id="repeaterContainer">
<table style="table-layout: fixed; width:505px">
<tr wicket:id="repeatingList" class="spaceUnder">
<td style="width:160px" wicket:id="time"></td>
<td style="width:220px" wicket:id="source"></td>
<td style="width:70px" wicket:id="category"></td>
<td style="width:90px" wicket:id="ssaAdmin"></td>
<td style="width:80px" wicket:id="userID"></td>
<td style="width:250px" wicket:id="action"></td>
</tr>
</table>
</div>
</div>
</div>
div.container
{
position:relative;
overflow:auto;
width:720px;
height:380px;
border-width:1px;
border-style:solid;
border-color:#000;
background: #fff;
}
div.heading
{
position: absolute;
border-bottom: 1px solid #000;
background: #bbb;
width:1250px;
}
</style>
</wicket:head>
<wicket:extend>
<script>
$('.container').scroll(function() {
$('.header').css({
'left': 1250 - $(this).scrollLeft()
});
});
</script>
<p>
<div wicket:id="tabs" class="tabpanel"></div>
</p>
</wicket:extend>
答案 0 :(得分:0)
我理解是否正确,你需要滚动tbody并且整个表位于div中?