javascript - 在HTML表中调整列的大小

我有两张桌子。一个用于标题，另一个用于主体。我以这种方式创建了它，以便如果主体溢出，头将保持固定。

(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的初学者。如果您可以放置​​示例代码，那将有很大的帮助。谢谢。

样品：

我已经拖动了“帐户名称”列，并在我释放它时设置了列宽。

最佳答案

香港专业教育学院搜索了很多我自己的表小部件。您需要两个表，每个表中的一个colgroup和col´s必须匹配您的表列数。我已经制造了一个小提琴，我希望它足够清楚。表的两个列需要在您的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>

关于javascript - 在HTML表中调整列的大小，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/40862042/