在HTML表中調整列大小

Question

我有兩個表。一個用於頭部和身體的其他部分。我這樣創建它，這樣如果主體溢出，標題將保持不變。

(function() { 
 
    var target = $("#target"); 
 
    $("#source").scroll(function() { 
 
     target.prop("scrollTop", this.scrollTop) 
 
      .prop("scrollLeft", this.scrollLeft); 
 
    }); 
 
})();

.scroll-example { 
 
    display: block; 
 
    margin-right: 20px; 
 
    width: 100%; 
 
} 
 
td { 
 
    border: 1px solid black; 
 
    min-width: 100px; 
 
    max-width: 100px; 
 
    overflow: hidden; 
 
    text-overflow: ellipsis; 
 
    white-space: nowrap; 
 
} 
 
td:hover i { 
 
    display: block; 
 
    float: right; 
 
    visibility: visible; 
 
} 
 
i { 
 
    display: none; 
 
    visibility: hidden; 
 
}

<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.css" rel="stylesheet" /> 
 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 

 
<div style="overflow: hidden;width: 400px;"> 
 
    <table id="target" class="scroll-example" style="overflow: hidden;"> 
 
    <tr> 
 
     <td class="col1">HHHHHHHHHHHHH</td> 
 
     <td class="col2">HHHHHHHHHHH</td> 
 
     <td class="col3">HHHHHHHHHHH</td> 
 
     <td class="col4">HHHHHHHHHHH</td> 
 
     <td class="col5">HHHHHHHHHHH</td> 
 
     <td class="col6">HHHHHHHHHHH</td> 
 
     <td class="col7" width="20px" style="border-color: white;"></td> 
 
    </tr> 
 
    </table> 
 

 
    <table id="source" class="scroll-example" style="overflow: scroll;height: 50px;"> 
 
    <tr> 
 
     <td class="col1"><i class="fa fa-pencil"></i>AAAAAAAAAAA</td> 
 
     <td class="col2"><i class="fa fa-pencil" aria-hidden="true"></i>AAAAAAAAAAA</td> 
 
     <td class="col1"><i class="fa fa-lock" aria-hidden="true"></i>AAAAAAAAAAA</td> 
 
     <td class="col1"><i class="fa fa-pencil" aria-hidden="true"></i>AAAAAAAAAAA</td> 
 
     <td class="col1"><i class="fa fa-lock" aria-hidden="true"></i>AAAAAAAAAAA</td> 
 
     <td class="col1"><i class="fa fa-lock" aria-hidden="true"></i>AAAAAAAAAAA</td> 
 
    </tr> 
 
    </table> 
 
</div>

現在我期待的動態調整列。因此，當用戶調整頂部表格列時，它應該調整相應的底部單元格列的大小。

我試過td{resize: horizontal;}但它不工作，我想這是因爲td{min-width:100px;max-width:100px;}。

有沒有辦法在這個表中實現列大小調整？

我是一名CSS和jQuery初學者。如果你可以放置一個示例代碼，這將非常有幫助。謝謝。

樣品：

我已經拖「帳戶名稱」欄，當我放開，列寬度設置。

Answer 1

我搜查了很多我自己的表小部件。你需要在每個表中有2個表，它們必須與表列數相匹配。我創造了一個小提琴，我希望它足夠清晰。表格的兩列需要在jquery調整大小功能上同步。

.head{ 
 
    
 
    width: 100%; 
 
    table-layout: fixed; 
 
    border-collapse: collapse; 
 
    border-spacing: 0; 
 
    empty-cells: show; 
 
    
 
} 
 

 
.body{ 
 
    
 
    width: 100%; 
 
    table-layout: fixed; 
 
    border-collapse: collapse; 
 
    border-spacing: 0; 
 
    empty-cells: show; 
 
    
 
}

<table class="head"> 
 
    <colgroup> 
 
     <col width="100px"> <!-- Our resized column --> 
 
     <col> 
 
     <col> 
 
    </colgroup> 
 
    <tbody> 
 
     <tr> 
 
      <td>#</td> 
 
      <td>From</td> 
 
      <td>Subject</td> 
 
     </tr> 
 
    </tbody> 
 
</table> 
 

 
<table class="body"> 
 
    <colgroup> 
 
     <col width="100px"> <!-- Our resized column --> 
 
     <col> 
 
     <col> 
 
    </colgroup> 
 
    <tbody> 
 
     <tr> 
 
      <td>00001</td> 
 
      <td>Mister Exmple</td> 
 
      <td>Problems with sharing</td> 
 
     </tr> 
 
     <tr> 
 
      <td>00002</td> 
 
      <td>Mister Example 02</td> 
 
      <td>Ouh is this a subject?</td> 
 
     </tr> 
 
     <tr> 
 
      <td>00003</td> 
 
      <td>Mistr Default</td> 
 
      <td>Yo whats up</td> 
 
     </tr> 
 
    </tbody> 
 
</table>