HTML中帶有固定標題的可調整大小的列表

我想創建一個帶有固定標題和列的表應該可調整大小。HTML中帶有固定標題的可調整大小的列表

但是，每當嘗試調整它不完全對齊。它在鉻中破碎更多。

下文稱從 - Resizable columns tables with fixed header

在頁面的加載 -

但是當嘗試調整列 -

富林偉業是我的網頁 -

<html> 
<script src="https://code.jquery.com/jquery-1.12.4.js"></script> 

<script src="http://www.bacubacu.com/colresizable/js/colResizable-1.5.min.js"></script> 


<!-- 
<link href="http://www.bacubacu.com/colresizable/css/main.css" rel="stylesheet" /> --> 

<style> 
    table { 
      border-collapse: collapse; /* make simple 1px lines borders if border defined */ 
      table-layout: fixed; 
       font-size: 11px; 
      font-family: Arial,Helvetica,sans-serif !important; 
     } 


    td{ 
     overflow:hidden; 
     text-overflow: ellipsis;border:1px solid #ddd; 
    } 

    tr:hover { 
    background-color: rgba(176, 225, 250, 0.48) !important; 
} 


    th { 
     white-space: nowrap !important;border:1px solid #ddd; 
    } 

    td { 
     white-space: nowrap !important; 
    } 

    .c1{ 
     width: 10%; 
    } 

    .c2,.c3{ 
     width: 18%; 
    } 

    .c4,.c5,.c6{ 
     width: 18%; 
    } 


    #c1{ 
     width: 10%; 
    } 

    #c2,#c3{ 
     width: 18%; 
    } 

    #c4,#c5,#c6{ 
     width: 18%; 
    } 

</style> 



<script> 
$(document).ready(function(){ 

    $('#tableHeader').colResizable({ 
     fixed:false, 
     liveDrag: true, 
     onDrag: resFun 
    }); 

    /* 
    $('.c1').width('20%'); 
    $('.c2').width('40%'); 
    $('.c3').width('40%'); 
*/ 

    function resFun() { 
     var c1 = $('#c1').width(); 
     var c2 = $('#c2').width(); 
     var c3 = $('#c3').width(); 

     var c4 = $('#c4').width(); 
     var c5 = $('#c5').width(); 
     var c6 = $('#c6').width(); 

     $('.c1').width(c1); 
     $('.c2').width(c2); 
     $('.c3').width(c3); 


     $('.c4').width(c4); 
     $('.c5').width(c5); 
     $('.c6').width(c6); 

    }; 

    resFun(); 
}); 
</script> 

<div style="width:70%"> 

<div style="height: 39px;"> 
    <table class="" id="tableHeader" style="width: 100%; height: 39px;" cellpadding="3" cellspacing="0"> 
     <tr> 
      <th id="c1">first</th> 
      <th id="c2">second</th> 
      <th id="c3">third</th> 

      <th id="c4">Fourth</th> 
      <th id="c5">Fifth</th> 
      <th id="c6">Sixth</th> 
     </tr> 
    </table> 
</div> 
<div style="overflow: auto; height: 200px;" cellpadding="3" cellspacing="0"> 
    <table class="" id="table"> 
     <tr> 
      <td class="c1">col 1</td> 
      <td class="c2">col 2</td> 
      <td class="c3">col 3</td> 


      <td class="c4">col 1</td> 
      <td class="c5">col 2</td> 
      <td class="c6">col 3</td> 


     </tr> 
     <tr> 
      <td class="c1">col 1</td> 
      <td class="c2">col 2</td> 
      <td class="c3">col 3</td> 

      <td class="c4">col 1</td> 
      <td class="c5">col 2</td> 
      <td class="c6">col 3</td> 

     </tr> 
     <tr> 
      <td class="c1">col 1</td> 
      <td class="c2">col 2</td> 
      <td class="c3">col 3</td> 


      <td class="c4">col 1</td> 
      <td class="c5">col 2</td> 
      <td class="c6">col 3</td> 

     </tr> 
     <tr> 
      <td class="c1">col 1</td> 
      <td class="c2">col 2</td> 
      <td class="c3">col 3</td> 

      <td class="c4">col 1</td> 
      <td class="c5">col 2</td> 
      <td class="c6">col 3</td> 


     </tr> 
     <tr> 
      <td class="c1">col 1</td> 
      <td class="c2">col 2</td> 
      <td class="c3">col 3</td> 

      <td class="c4">col 1</td> 
      <td class="c5">col 2</td> 
      <td class="c6">col 3</td> 
     </tr> 
     <tr> 
      <td class="c1">col 1</td> 
      <td class="c2">col 2</td> 
      <td class="c3">col 3</td> 

      <td class="c4">col 1</td> 
      <td class="c5">col 2</td> 
      <td class="c6">col 3</td> 
     </tr> 
     <tr> 
      <td class="c1">col 1</td> 
      <td class="c2">col 2</td> 
      <td class="c3">col 3</td> 

      <td class="c4">col 1</td> 
      <td class="c5">col 2</td> 
      <td class="c6">col 3</td> 
     </tr> 
     <tr> 
      <td class="c1">col 1</td> 
      <td class="c2">col 2</td> 
      <td class="c3">col 3</td> 

      <td class="c4">col 1</td> 
      <td class="c5">col 2</td> 
      <td class="c6">col 3</td> 
     </tr> 
    </table> 
</div> 

</div> 

</html>

來源

2017-02-13 ab02

當您調用resFun()函數時，將固定寬度設置爲標題。每次觸發resize事件時都應調用該函數。當使用jquery代碼調整窗口大小時，可以調用該函數：

$(window).resize(resFun);

來源

2017-04-10 18:35:17

HTML中帶有固定標題的可調整大小的列表

回答

相關問題