[英]Produce horizontal scroll for table 'tbody'
我有一个传统的桌子,上面放着thead,tbody等。 这对于tablesorter.js是必需的。
我有的:
<div id="tableWrapper">
<div id="tableContainer" class="tableContainer">
<table id="scrollTable">
<thead class="fixedHeader">
<tr class="tableHeader even">
<th class="header">
<span>Name</span>
</th>
<th class="header">
<span>Address</span>
</th>
</tr>
</thead>
<tbody class="scrollContent">
<tr class="tableRow">
<td class="td_0">
<span>
Doe, John
</span>
</td>
<td class="td_0">
<span>
Memory Lane
</span>
</td>
</tr>
</tbody>
</table>
</div>
</div>
CSS:
#tableWrapper tbody{
color:#00467f;
font-weight:500;
position:absolute;
overflow-y: auto;
overflow-x: scroll;
height:300px;
width:300px;
}
#tableWrapper #tableContainer{
width: 1100px;
overflow: hidden;
}
#tableWrapper tbody>tr{
width: 1200px;
}
我将表标题部分保持垂直固定,因此tbody位置是绝对的,可以将表标题保持在tbody垂直滚动事件之外。 我尝试将tbody> tr的宽度设置为高于tbody的宽度,但是没有运气。
tbody> tr宽度会自动缩小为tbody的大小。
问题:如果没有水平滚动整个表,则无法使tbody水平滚动条滚动(因此,垂直滚动条会消失到上溢状态:隐藏)。 我只想水平滚动tbody,然后有一个jquery将该事件绑定到标题。 所以没有问题。 只是试图让水平滚动条只滚动到tbody。
我能够使tbody溢出-y:auto起作用,但不能溢出-x:auto。 有没有办法使tr变宽以使tbody左右滚动? 如果是这样,怎么办?
我知道了。
我添加了float:left; 并显示:阻止到tbody> tr。
CSS:
#tableWrapper tbody>tr{
display:block;
float:left;
width: 1200px; /*desired width*/
}
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.