Question

我正在研究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;

    }

如果垂直滚动打开，如何修复和显示没有任何对齐问题的边框。任何建议都会有所帮助。

Answer 1

由于表的滚动条宽度小于固定表，表格对齐会发生变化。一种方法是在滚动中查找表格的宽度并将该宽度设置为固定表格

if( $('.pane-vScroll').prop('scrollHeight') >$('.pane-vScroll').height()){
   var width = $('.pane-vScroll table').width();  
   $('.pane-hScroll table:first').width( width);
}

＆＃13;

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();
  })

})

＆＃13;

   * {
        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;

    }

＆＃13;

<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>

＆＃13;

https://jsfiddle.net/ffr991oe/1/

Answer 2

<thead style="overflow-y: scroll;">
<tbody style="overflow-y: scroll;">

您可以强制滚动条在 thead 和 tbody 元素上始终可见。

假设您将两个部分中的列宽设置为相同，则这些列会完美对齐。如果标题上没有滚动条，当滚动条在主体上可见时，列会偏移滚动条的宽度，并且偏移量向右侧变差。

html表

2 个答案: