我正在开发 jQuery 应用程序。在使用具有固定标题和垂直滚动条的表格时，我遇到了列边框对齐问题。 当行数较多且垂直滚动条可见时，列边框会稍微未对齐以适合滚动条。 请建议如何修复它。我正在浏览很多链接，但没有运气。 请找到演示 here
代码:
<div class="pane pane--table1">
<div class="pane-hScroll">
<table>
<thead>
<th style="text-align: center;">Header1</th>
<th style="text-align: center;">Header2</th>
<th style="text-align: center;">Header3</th>
</thead>
</table>
<div class="pane-vScroll">
<table>
<tbody>
<tr>
<td style="text-align: center;">Dataaaa</td>
<td style="text-align: center;">Data</td>
<td style="text-align: center;">Data</td>
</tr>
<tr>
<td style="text-align: center;">Dataaaa</td>
<td style="text-align: center;">Data</td>
<td style="text-align: center;">Data</td>
</tr>
<tr>
<td style="text-align: center;">Dataaaa</td>
<td style="text-align: center;">Data</td>
<td style="text-align: center;">Data</td>
</tr>
<tr>
<td style="text-align: center;">Dataaaa</td>
<td style="text-align: center;">Data</td>
<td style="text-align: center;">Data</td>
</tr> <tr>
<td style="text-align: center;">Dataaaa</td>
<td style="text-align: center;">Data</td>
<td style="text-align: center;">Data</td>
</tr> <tr>
<td style="text-align: center;">Dataaaa</td>
<td style="text-align: center;">Data</td>
<td style="text-align: center;">Data</td>
</tr>
<tr>
<td style="text-align: center;">Dataaaa</td>
<td style="text-align: center;">Data</td>
<td style="text-align: center;">Data</td>
</tr>
<tr>
<td style="text-align: center;">Dataaaa</td>
<td style="text-align: center;">Data</td>
<td style="text-align: center;">Data</td>
</tr>
<tr>
<td style="text-align: center;">Dataaaa</td>
<td style="text-align: center;">Data</td>
<td style="text-align: center;">Data</td>
</tr> <tr>
<td style="text-align: center;">Dataaaa</td>
<td style="text-align: center;">Data</td>
<td style="text-align: center;">Data</td>
</tr>
</tbody></table></div></div>
</div>
CSS 代码:
* {
box-sizing: border-box;
}
body {
font: 14px/1 Arial, sans-serif;
}
table {
border-collapse: collapse;
background: white;
table-layout: fixed;
width: 100%;
}
th, td {
padding: 8px 16px;
border: 1px solid #ddd;
width: 160px;
overflow: hidden;
white-space: nowrap;
}
.pane {
background: #eee;
}
.pane-hScroll {
overflow: auto;
}
.pane-vScroll {
overflow-y: auto;
overflow-x: hidden;
height: 30%;
}
table { table-layout:fixed;width: 100% }
td {
white-space: -o-pre-wrap;
word-wrap: break-word;
white-space: pre-wrap;
white-space: -moz-pre-wrap;
white-space: -pre-wrap;
}
即使垂直滚动打开，如何修复和显示边框而不出现任何对齐问题。任何建议都会有帮助。
最佳答案
表格对齐方式发生变化，因为表格的滚动条宽度小于固定表格。一种方法是找到滚动表格的宽度并将该宽度设置为固定表格
if( $('.pane-vScroll').prop('scrollHeight') >$('.pane-vScroll').height()){
var width = $('.pane-vScroll table').width();
$('.pane-hScroll table:first').width( width);
}
function setTableWidth(){
if( $('.pane-vScroll').prop('scrollHeight') >$('.pane-vScroll').height()){
var width = $('.pane-vScroll table').width();
$('.pane-hScroll table:first').width( width);
}
}
$(function(){
setTableWidth();
$(window).resize(function () {
setTableWidth();
})
}) * {
box-sizing: border-box;
}
body {
font: 14px/1 Arial, sans-serif;
}
table {
border-collapse: collapse;
background: white;
table-layout: fixed;
width: 100%;
}
th, td {
padding: 8px 16px;
border: 1px solid #ddd;
width: 160px;
overflow: hidden;
white-space: nowrap;
}
.pane {
background: #eee;
}
.pane-hScroll {
overflow: auto;
}
.pane-vScroll {
overflow-y: auto;
overflow-x: hidden;
height: 150px;
}
table { table-layout:fixed;width: 100% }
td {
white-space: -o-pre-wrap;
word-wrap: break-word;
white-space: pre-wrap;
white-space: -moz-pre-wrap;
white-space: -pre-wrap;
}<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="pane pane--table1">
<div class="pane-hScroll">
<table>
<thead>
<th style="text-align: center;">Header1</th>
<th style="text-align: center;">Header2</th>
<th style="text-align: center;">Header3</th>
</thead>
</table>
<div class="pane-vScroll">
<table>
<tbody>
<tr>
<td style="text-align: center;">Dataaaa</td>
<td style="text-align: center;">Data</td>
<td style="text-align: center;">Data</td>
</tr>
<tr>
<td style="text-align: center;">Dataaaa</td>
<td style="text-align: center;">Data</td>
<td style="text-align: center;">Data</td>
</tr>
<tr>
<td style="text-align: center;">Dataaaa</td>
<td style="text-align: center;">Data</td>
<td style="text-align: center;">Data</td>
</tr>
<tr>
<td style="text-align: center;">Dataaaa</td>
<td style="text-align: center;">Data</td>
<td style="text-align: center;">Data</td>
</tr> <tr>
<td style="text-align: center;">Dataaaa</td>
<td style="text-align: center;">Data</td>
<td style="text-align: center;">Data</td>
</tr> <tr>
<td style="text-align: center;">Dataaaa</td>
<td style="text-align: center;">Data</td>
<td style="text-align: center;">Data</td>
</tr>
<tr>
<td style="text-align: center;">Dataaaa</td>
<td style="text-align: center;">Data</td>
<td style="text-align: center;">Data</td>
</tr>
<tr>
<td style="text-align: center;">Dataaaa</td>
<td style="text-align: center;">Data</td>
<td style="text-align: center;">Data</td>
</tr>
<tr>
<td style="text-align: center;">Dataaaa</td>
<td style="text-align: center;">Data</td>
<td style="text-align: center;">Data</td>
</tr> <tr>
<td style="text-align: center;">Dataaaa</td>
<td style="text-align: center;">Data</td>
<td style="text-align: center;">Data</td>
</tr>
</tbody></table></div></div>
</div>关于jquery - html表格的对齐问题，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/43986894/