我一直在只用 jQuery 开发一个可滚动的 tbody 表，唯一的问题是:每当文本比其他文本更大或更小时，我的 thead 和 tbody 就会搞砸，我怎样才能阻止它这样做？
可滚动的 tbody 正在工作，只是对齐不太正确:
右:
+-----------+
| h | h | h | -> Header is okay if all THs are about the same size
|¨¨¨¨¨¨¨¨¨¨¨|
| c | c | c | -> Same thing applies to the tbody
问题:
+-----------+
|hasd| h | h| -> if the texts are different sizes the fields get screwed up
|¨¨¨¨¨¨¨¨¨¨¨|
| c |casd |c| -> Same thing applies to the tbody
我的代码:
$(function() {
makeItScrollable();
});
$(window).resize(function() {
makeItScrollable();
});
function makeItScrollable() {
$('table').css({
"border-collapse": "collapse"
});
$('thead').css({
"position": "absolute",
"width": "100%"
});
$('tbody').css({
"position": "absolute",
"overflow-y": "scroll",
"overflow-x": "hidden",
"height": "100%"
});
$('tbody').css({
'width': Math.ceil($('thead').width() + 17)
});
$('tbody > tr > td').css({
'width': Math.ceil($('thead').width())
});
$('thead > tr > th').css({
'width': $('tbody').width() / $('thead > tr > th').length
});
$('tbody').css({
'margin-top': $('thead').height() - 1
});
}<script type="text/javascript" src="http://code.jquery.com/jquery-latest.min.js"></script>
<style>
.table {
position: absolute;
width: calc(100% - 30px);
height: calc(100% - 36px);
}
td,
th {
border: 1px solid #000;
text-align: center;
margin: 0;
padding: 0;
}
</style>
<div class="table">
<table>
<thead>
<tr>
<th>HEADERererASDASDASDSA</th>
<th>HEADER</th>
<th>HEADER</th>
</tr>
</thead>
<tbody>
<tr>
<td>CELL</td>
<td>CELL</td>
<td>CELL</td>
</tr>
<tr>
<td>CELL</td>
<td>CELL</td>
<td>CELL</td>
</tr>
<tr>
<td>CELL</td>
<td>CELL</td>
<td>CELL</td>
</tr>
<tr>
<td>CELL</td>
<td>CELL</td>
<td>CELL</td>
</tr>
<tr>
<td>CELL</td>
<td>CELL</td>
<td>CELL</td>
</tr>
<tr>
<td>CELL</td>
<td>CELL</td>
<td>CELL</td>
</tr>
<tr>
<td>CELL</td>
<td>CELL</td>
<td>CELL</td>
</tr>
<tr>
<td>CELL</td>
<td>CELL</td>
<td>CELL</td>
</tr>
<tr>
<td>CELL</td>
<td>CELL</td>
<td>CELL</td>
</tr>
<tr>
<td>CELL</td>
<td>CELL</td>
<td>CELL</td>
</tr>
<tr>
<td>CELL</td>
<td>CELL</td>
<td>CELL</td>
</tr>
<tr>
<td>CELL</td>
<td>CELL</td>
<td>CELL</td>
</tr>
<tr>
<td>CELL</td>
<td>CELL</td>
<td>CELL</td>
</tr>
<tr>
<td>CELL</td>
<td>CELL</td>
<td>CELL</td>
</tr>
<tr>
<td>CELL</td>
<td>CELL</td>
<td>CELL</td>
</tr>
<tr>
<td>CELL</td>
<td>CELL</td>
<td>CELL</td>
</tr>
<tr>
<td>CELL</td>
<td>CELL</td>
<td>CELL</td>
</tr>
<tr>
<td>CELL</td>
<td>CELL</td>
<td>CELL</td>
</tr>
<tr>
<td>CELL</td>
<td>CELL</td>
<td>CELL</td>
</tr>
<tr>
<td>CELL</td>
<td>CELL</td>
<td>CELL</td>
</tr>
<tr>
<td>CELL</td>
<td>CELL</td>
<td>CELL</td>
</tr>
<tr>
<td>CELL</td>
<td>CELL</td>
<td>CELL</td>
</tr>
<tr>
<td>CELL</td>
<td>CELL</td>
<td>CELL</td>
</tr>
<tr>
<td>CELL</td>
<td>CELL</td>
<td>CELL</td>
</tr>
<tr>
<td>CELL</td>
<td>CELL</td>
<td>CELL</td>
</tr>
<tr>
<td>CELL</td>
<td>CELL</td>
<td>CELL</td>
</tr>
<tr>
<td>CELL</td>
<td>CELL</td>
<td>CELL</td>
</tr>
<tr>
<td>CELL</td>
<td>CELL</td>
<td>CELL</td>
</tr>
<tr>
<td>CELL</td>
<td>CELL</td>
<td>CELL</td>
</tr>
<tr>
<td>CELL</td>
<td>CELL</td>
<td>CELL</td>
</tr>
<tr>
<td>CELL</td>
<td>CELL</td>
<td>CELL</td>
</tr>
<tr>
<td>CELL</td>
<td>CELL</td>
<td>CELL</td>
</tr>
<tr>
<td>CELL</td>
<td>CELL</td>
<td>CELL</td>
</tr>
<tr>
<td>CELL</td>
<td>CELL</td>
<td>CELL</td>
</tr>
<tr>
<td>CELL</td>
<td>CELL</td>
<td>CELL</td>
</tr>
<tr>
<td>CELL</td>
<td>CELL</td>
<td>CELL</td>
</tr>
<tr>
<td>CELL</td>
<td>CELL</td>
<td>CELL</td>
</tr>
<tr>
<td>CELL</td>
<td>CELL</td>
<td>CELL</td>
</tr>
<tr>
<td>CELL</td>
<td>CELL</td>
<td>CELL</td>
</tr>
<tr>
<td>CELL</td>
<td>CELL</td>
<td>CELL</td>
</tr>
<tr>
<td>CELL</td>
<td>CELL</td>
<td>CELL</td>
</tr>
<tr>
<td>CELL</td>
<td>CELL</td>
<td>CELL</td>
</tr>
<tr>
<td>CELL</td>
<td>CELL</td>
<td>CELL</td>
</tr>
<tr>
<td>CELL</td>
<td>CELL</td>
<td>CELL</td>
</tr>
<tr>
<td>CELL</td>
<td>CELL</td>
<td>CELL</td>
</tr>
<tr>
<td>CELL</td>
<td>CELL</td>
<td>CELL</td>
</tr>
<tr>
<td>CELL</td>
<td>CELL</td>
<td>CELL</td>
</tr>
<tr>
<td>CELL</td>
<td>CELL</td>
<td>CELL</td>
</tr>
<tr>
<td>CELL</td>
<td>CELL</td>
<td>CELL</td>
</tr>
<tr>
<td>CELL</td>
<td>CELL</td>
<td>CELL</td>
</tr>
<tr>
<td>CELL</td>
<td>CELL</td>
<td>CELL</td>
</tr>
<tr>
<td>CELL</td>
<td>CELL</td>
<td>CELL</td>
</tr>
<tr>
<td>CELL</td>
<td>CELL</td>
<td>CELL</td>
</tr>
<tr>
<td>CELL</td>
<td>CELL</td>
<td>CELL</td>
</tr>
<tr>
<td>CELL</td>
<td>CELL</td>
<td>CELL</td>
</tr>
<tr>
<td>CELL</td>
<td>CELL</td>
<td>CELL</td>
</tr>
<tr>
<td>CELL</td>
<td>CELL</td>
<td>CELL</td>
</tr>
<tr>
<td>CELL</td>
<td>CELL</td>
<td>CELL</td>
</tr>
<tr>
<td>CELL</td>
<td>CELL</td>
<td>CELL</td>
</tr>
<tr>
<td>CELL</td>
<td>CELL</td>
<td>CELL</td>
</tr>
<tr>
<td>CELL</td>
<td>CELL</td>
<td>CELL</td>
</tr>
<tr>
<td>CELL</td>
<td>CELL</td>
<td>CELL</td>
</tr>
<tr>
<td>CELL</td>
<td>CELL</td>
<td>CELL</td>
</tr>
<tr>
<td>CELL</td>
<td>CELL</td>
<td>CELL</td>
</tr>
<tr>
<td>CELL</td>
<td>CELL</td>
<td>CELL</td>
</tr>
<tr>
<td>CELL</td>
<td>CELL</td>
<td>CELL</td>
</tr>
<tr>
<td>CELL</td>
<td>CELL</td>
<td>CELL</td>
</tr>
<tr>
<td>CELL</td>
<td>CELL</td>
<td>CELL</td>
</tr>
<tr>
<td>CELL</td>
<td>CELL</td>
<td>CELL</td>
</tr>
<tr>
<td>CELL</td>
<td>CELL</td>
<td>CELL</td>
</tr>
<tr>
<td>CELL</td>
<td>CELL</td>
<td>CELL</td>
</tr>
<tr>
<td>CELL</td>
<td>CELL</td>
<td>CELL</td>
</tr>
<tr>
<td>CELL</td>
<td>CELL</td>
<td>CELL</td>
</tr>
<tr>
<td>CELL</td>
<td>CELL</td>
<td>CELL</td>
</tr>
<tr>
<td>CELL</td>
<td>CELL</td>
<td>CELL</td>
</tr>
<tr>
<td>CELL</td>
<td>CELL</td>
<td>CELL</td>
</tr>
<tr>
<td>CELL</td>
<td>CELL</td>
<td>CELL</td>
</tr>
<tr>
<td>CELL</td>
<td>CELL</td>
<td>CELL</td>
</tr>
<tr>
<td>CELL</td>
<td>CELL</td>
<td>CELL</td>
</tr>
<tr>
<td>CELL</td>
<td>CELL</td>
<td>CELL</td>
</tr>
<tr>
<td>CELL</td>
<td>CELL</td>
<td>CELL</td>
</tr>
<tr>
<td>CELL</td>
<td>CELL</td>
<td>CELL</td>
</tr>
<tr>
<td>CELL</td>
<td>CELL</td>
<td>CELL</td>
</tr>
<tr>
<td>CELL</td>
<td>CELL</td>
<td>CELL</td>
</tr>
<tr>
<td>CELL</td>
<td>CELL</td>
<td>CELL</td>
</tr>
<tr>
<td>CELL</td>
<td>CELL</td>
<td>CELL</td>
</tr>
<tr>
<td>CELL</td>
<td>CELL</td>
<td>CELL</td>
</tr>
<tr>
<td>CELL</td>
<td>CELL</td>
<td>CELL</td>
</tr>
<tr>
<td>CELL</td>
<td>CELL</td>
<td>CELL</td>
</tr>
<tr>
<td>CELL</td>
<td>CELL</td>
<td>CELL</td>
</tr>
<tr>
<td>CELL</td>
<td>CELL</td>
<td>CELL</td>
</tr>
<tr>
<td>CELL</td>
<td>CELL</td>
<td>CELL</td>
</tr>
<tr>
<td>CELL</td>
<td>CELL</td>
<td>CELL</td>
</tr>
<tr>
<td>CELL</td>
<td>CELL</td>
<td>CELL</td>
</tr>
<tr>
<td>CELL</td>
<td>CELL</td>
<td>CELL</td>
</tr>
<tr>
<td>CELL</td>
<td>CELL</td>
<td>CELL</td>
</tr>
<tr>
<td>CELL</td>
<td>CELL</td>
<td>CELL</td>
</tr>
<tr>
<td>CELL</td>
<td>CELL</td>
<td>CELL</td>
</tr>
<tr>
<td>CELL</td>
<td>CELL</td>
<td>CELL</td>
</tr>
<tr>
<td>CELL</td>
<td>CELL</td>
<td>CELL</td>
</tr>
<tr>
<td>CELL</td>
<td>CELL</td>
<td>CELL</td>
</tr>
</tbody>
</table>
</div>最佳答案
根据 @Marcos 评论，您可以使用 javascript/jQuery 将第一个 tbody > tr 中每个 td 的宽度设置为等于相应 的宽度>thead > tr > th。
在此示例中，我已将样式更改从 JS 中移出，以使事情更加清晰。除了 osx 上的 Chrome 之外，所有这些都没有在任何其他平台上进行过测试，但它应该足以让您入门。
$(function() {
makeItScrollable();
});
$(window).resize(function() {
makeItScrollable();
});
function makeItScrollable(){
//add a class as a hook for our styles
$('table').addClass("scrollable");
//set the width of the first row of tds to match the td above (wont work is you have colspans)
$('tbody > tr > td').each(function(index, value) {
$(this).css("width",$("thead > tr > th:eq("+index+")").width()+1);
});
}/* default tables */
.table {
position: absolute;
width: calc(100% - 30px);
height: calc(100% - 36px);
}
table {width:100%;}
td,
th {
border: 1px solid #000;
text-align: center;
margin: 0;
padding: 0;
}
/* scrollable tables */
table.scrollable {
border-collapse: collapse;
}
table.scrollable > tbody {
position: absolute;
overflow-y: scroll;
overflow-x: hidden;
height: 100%;
margin-top: -1px;
}<script type="text/javascript" src="http://code.jquery.com/jquery-latest.min.js"></script>
<div class="table">
<table>
<thead>
<tr>
<th>HEADERererASDASDASDSA</th>
<th>HEADER</th>
<th>HEADER</th>
</tr>
</thead>
<tbody>
<tr>
<td>CELL</td>
<td>CELL</td>
<td>CELL</td>
</tr>
<tr>
<td>CELL</td>
<td>CELL</td>
<td>CELL</td>
</tr>
<tr>
<td>CELL</td>
<td>CELL</td>
<td>CELL</td>
</tr>
<tr>
<td>CELL</td>
<td>CELL</td>
<td>CELL</td>
</tr>
<tr>
<td>CELL</td>
<td>CELL</td>
<td>CELL</td>
</tr>
<tr>
<td>CELL</td>
<td>CELL</td>
<td>CELL</td>
</tr>
<tr>
<td>CELL</td>
<td>CELL</td>
<td>CELL</td>
</tr>
<tr>
<td>CELL</td>
<td>CELL</td>
<td>CELL</td>
</tr>
<tr>
<td>CELL</td>
<td>CELL</td>
<td>CELL</td>
</tr>
<tr>
<td>CELL</td>
<td>CELL</td>
<td>CELL</td>
</tr>
<tr>
<td>CELL</td>
<td>CELL</td>
<td>CELL</td>
</tr>
<tr>
<td>CELL</td>
<td>CELL</td>
<td>CELL</td>
</tr>
<tr>
<td>CELL</td>
<td>CELL</td>
<td>CELL</td>
</tr>
<tr>
<td>CELL</td>
<td>CELL</td>
<td>CELL</td>
</tr>
<tr>
<td>CELL</td>
<td>CELL</td>
<td>CELL</td>
</tr>
<tr>
<td>CELL</td>
<td>CELL</td>
<td>CELL</td>
</tr>
<tr>
<td>CELL</td>
<td>CELL</td>
<td>CELL</td>
</tr>
<tr>
<td>CELL</td>
<td>CELL</td>
<td>CELL</td>
</tr>
<tr>
<td>CELL</td>
<td>CELL</td>
<td>CELL</td>
</tr>
<tr>
<td>CELL</td>
<td>CELL</td>
<td>CELL</td>
</tr>
<tr>
<td>CELL</td>
<td>CELL</td>
<td>CELL</td>
</tr>
<tr>
<td>CELL</td>
<td>CELL</td>
<td>CELL</td>
</tr>
<tr>
<td>CELL</td>
<td>CELL</td>
<td>CELL</td>
</tr>
<tr>
<td>CELL</td>
<td>CELL</td>
<td>CELL</td>
</tr>
<tr>
<td>CELL</td>
<td>CELL</td>
<td>CELL</td>
</tr>
<tr>
<td>CELL</td>
<td>CELL</td>
<td>CELL</td>
</tr>
<tr>
<td>CELL</td>
<td>CELL</td>
<td>CELL</td>
</tr>
<tr>
<td>CELL</td>
<td>CELL</td>
<td>CELL</td>
</tr>
<tr>
<td>CELL</td>
<td>CELL</td>
<td>CELL</td>
</tr>
<tr>
<td>CELL</td>
<td>CELL</td>
<td>CELL</td>
</tr>
<tr>
<td>CELL</td>
<td>CELL</td>
<td>CELL</td>
</tr>
<tr>
<td>CELL</td>
<td>CELL</td>
<td>CELL</td>
</tr>
<tr>
<td>CELL</td>
<td>CELL</td>
<td>CELL</td>
</tr>
<tr>
<td>CELL</td>
<td>CELL</td>
<td>CELL</td>
</tr>
<tr>
<td>CELL</td>
<td>CELL</td>
<td>CELL</td>
</tr>
<tr>
<td>CELL</td>
<td>CELL</td>
<td>CELL</td>
</tr>
<tr>
<td>CELL</td>
<td>CELL</td>
<td>CELL</td>
</tr>
<tr>
<td>CELL</td>
<td>CELL</td>
<td>CELL</td>
</tr>
<tr>
<td>CELL</td>
<td>CELL</td>
<td>CELL</td>
</tr>
<tr>
<td>CELL</td>
<td>CELL</td>
<td>CELL</td>
</tr>
<tr>
<td>CELL</td>
<td>CELL</td>
<td>CELL</td>
</tr>
<tr>
<td>CELL</td>
<td>CELL</td>
<td>CELL</td>
</tr>
<tr>
<td>CELL</td>
<td>CELL</td>
<td>CELL</td>
</tr>
<tr>
<td>CELL</td>
<td>CELL</td>
<td>CELL</td>
</tr>
<tr>
<td>CELL</td>
<td>CELL</td>
<td>CELL</td>
</tr>
<tr>
<td>CELL</td>
<td>CELL</td>
<td>CELL</td>
</tr>
<tr>
<td>CELL</td>
<td>CELL</td>
<td>CELL</td>
</tr>
<tr>
<td>CELL</td>
<td>CELL</td>
<td>CELL</td>
</tr>
<tr>
<td>CELL</td>
<td>CELL</td>
<td>CELL</td>
</tr>
<tr>
<td>CELL</td>
<td>CELL</td>
<td>CELL</td>
</tr>
<tr>
<td>CELL</td>
<td>CELL</td>
<td>CELL</td>
</tr>
<tr>
<td>CELL</td>
<td>CELL</td>
<td>CELL</td>
</tr>
<tr>
<td>CELL</td>
<td>CELL</td>
<td>CELL</td>
</tr>
<tr>
<td>CELL</td>
<td>CELL</td>
<td>CELL</td>
</tr>
<tr>
<td>CELL</td>
<td>CELL</td>
<td>CELL</td>
</tr>
<tr>
<td>CELL</td>
<td>CELL</td>
<td>CELL</td>
</tr>
<tr>
<td>CELL</td>
<td>CELL</td>
<td>CELL</td>
</tr>
<tr>
<td>CELL</td>
<td>CELL</td>
<td>CELL</td>
</tr>
<tr>
<td>CELL</td>
<td>CELL</td>
<td>CELL</td>
</tr>
<tr>
<td>CELL</td>
<td>CELL</td>
<td>CELL</td>
</tr>
<tr>
<td>CELL</td>
<td>CELL</td>
<td>CELL</td>
</tr>
<tr>
<td>CELL</td>
<td>CELL</td>
<td>CELL</td>
</tr>
<tr>
<td>CELL</td>
<td>CELL</td>
<td>CELL</td>
</tr>
<tr>
<td>CELL</td>
<td>CELL</td>
<td>CELL</td>
</tr>
<tr>
<td>CELL</td>
<td>CELL</td>
<td>CELL</td>
</tr>
<tr>
<td>CELL</td>
<td>CELL</td>
<td>CELL</td>
</tr>
<tr>
<td>CELL</td>
<td>CELL</td>
<td>CELL</td>
</tr>
<tr>
<td>CELL</td>
<td>CELL</td>
<td>CELL</td>
</tr>
<tr>
<td>CELL</td>
<td>CELL</td>
<td>CELL</td>
</tr>
<tr>
<td>CELL</td>
<td>CELL</td>
<td>CELL</td>
</tr>
<tr>
<td>CELL</td>
<td>CELL</td>
<td>CELL</td>
</tr>
<tr>
<td>CELL</td>
<td>CELL</td>
<td>CELL</td>
</tr>
<tr>
<td>CELL</td>
<td>CELL</td>
<td>CELL</td>
</tr>
<tr>
<td>CELL</td>
<td>CELL</td>
<td>CELL</td>
</tr>
<tr>
<td>CELL</td>
<td>CELL</td>
<td>CELL</td>
</tr>
<tr>
<td>CELL</td>
<td>CELL</td>
<td>CELL</td>
</tr>
<tr>
<td>CELL</td>
<td>CELL</td>
<td>CELL</td>
</tr>
<tr>
<td>CELL</td>
<td>CELL</td>
<td>CELL</td>
</tr>
<tr>
<td>CELL</td>
<td>CELL</td>
<td>CELL</td>
</tr>
<tr>
<td>CELL</td>
<td>CELL</td>
<td>CELL</td>
</tr>
<tr>
<td>CELL</td>
<td>CELL</td>
<td>CELL</td>
</tr>
<tr>
<td>CELL</td>
<td>CELL</td>
<td>CELL</td>
</tr>
<tr>
<td>CELL</td>
<td>CELL</td>
<td>CELL</td>
</tr>
<tr>
<td>CELL</td>
<td>CELL</td>
<td>CELL</td>
</tr>
<tr>
<td>CELL</td>
<td>CELL</td>
<td>CELL</td>
</tr>
<tr>
<td>CELL</td>
<td>CELL</td>
<td>CELL</td>
</tr>
<tr>
<td>CELL</td>
<td>CELL</td>
<td>CELL</td>
</tr>
<tr>
<td>CELL</td>
<td>CELL</td>
<td>CELL</td>
</tr>
<tr>
<td>CELL</td>
<td>CELL</td>
<td>CELL</td>
</tr>
<tr>
<td>CELL</td>
<td>CELL</td>
<td>CELL</td>
</tr>
<tr>
<td>CELL</td>
<td>CELL</td>
<td>CELL</td>
</tr>
<tr>
<td>CELL</td>
<td>CELL</td>
<td>CELL</td>
</tr>
<tr>
<td>CELL</td>
<td>CELL</td>
<td>CELL</td>
</tr>
<tr>
<td>CELL</td>
<td>CELL</td>
<td>CELL</td>
</tr>
<tr>
<td>CELL</td>
<td>CELL</td>
<td>CELL</td>
</tr>
<tr>
<td>CELL</td>
<td>CELL</td>
<td>CELL</td>
</tr>
<tr>
<td>CELL</td>
<td>CELL</td>
<td>CELL</td>
</tr>
<tr>
<td>CELL</td>
<td>CELL</td>
<td>CELL</td>
</tr>
<tr>
<td>CELL</td>
<td>CELL</td>
<td>CELL</td>
</tr>
<tr>
<td>CELL</td>
<td>CELL</td>
<td>CELL</td>
</tr>
<tr>
<td>CELL</td>
<td>CELL</td>
<td>CELL</td>
</tr>
</tbody>
</table>
</div>关于javascript - 如何防止 td 中的文本破坏表格的对齐方式？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/35893759/