列在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个表，其中col的colgroup必须与你的表列数相匹配。我创造了一个小提琴，我希望它足够清楚。需要在jquery resize功能上同步表的两个列。

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

{{1}}