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