html表格的对齐问题 [英] alignment issue with html table
本文介绍了html表格的对齐问题的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
我正在开发jQuery应用程序.在使用固定标题和垂直滚动条的表时，我遇到列边界对齐问题. 当行数更多并且可以看到垂直滚动条时，列边框会稍稍不对齐以适合滚动条. 请建议如何修复它.我正在经历许多联系，但没有运气. 请找到演示 此处
I am working on jQuery application. I have a column border alignment issue when working with tables with fixed header and vertical scrollbar on. When number of rows are more and vertical scroll bar is visible the column border is slightly misaligned to fit the scrollbar. Please advice how to fix it. I'm going through many links but with no luck. Please find the demo 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;
}
即使打开垂直滚动条也如何固定和显示边框而没有任何对齐问题.任何建议都会有帮助.
How to fix and show the border without any alignment issue even when the vertical scroll is on.Any suggestions would be helpful.
推荐答案
由于表格的滚动条宽度小于固定表格的宽度，因此表格对齐方式发生了变化.一种方法是在滚动中找到表格的宽度并将其设置为固定表的宽度
The table alignment changes because of the scrolbar width of table is less than the fixed table.One way is to find the width of the table in scroll and set that width to the fixed table
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>
https://jsfiddle.net/ffr991oe/1/
这篇关于html表格的对齐问题的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
