HTMLテーブルの列のサイズ変更

Question

2つのテーブルがあります。 1つはヘッダー用、もう1つはボディ用です。この方法で作成したので、ボディがオーバーフローした場合でもヘッダーは固定されたままになります。

(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

Iveは自分のテーブルウィジェットをたくさん検索しました。それぞれのテーブルには2つのテーブルが必要です。colgroupはテーブルのカラム数と一致する必要があります。私はフィドルを作りました。私はそれが十分にはっきりと願っています。テーブルの2つのcolは、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>