web-dev-qa-db-ja.com

HTMLテーブルの列のサイズを変更するにはどうすればよいですか？

かなり標準的なブートストラップスタイルの<table>があります。このテーブルの列のサイズを変更可能にします。 <th>要素の右境界線をクリックしてドラッグします。 Angularを使用しているためjQueryプラグインを使用できません。jQueryの依存関係は受け入れられません。

<th>要素の右側の境界でクリック/マウス移動イベントをキャッチできれば、独自のサイズ変更ロジックを実装できると考えていました（水平方向のマウスの動きを監視し、それに応じて幅を調整します）が、方法がわかりませんこれを行うことができます（私が知る限り、要素の境界に関連するイベントはありません）。

ユーザーが列のサイズを変更できるようにする最良の方法は何ですか？ jQueryなし（および-できれば-in Angular 2コンテキスト）。

javascripthtmlcsshtml5angular
19
Titan

resizeプロパティはテーブルでは機能しません。そのため、テーブルthおよびtd内にdivを配置し、サイズを変更する必要があります。

以下のスニペットを試してください

table {
  border-collapse: collapse;
  border-spacing: 0px;
}
td {
  border: 2px solid black;
  padding: 0;
  margin: 0px;
  overflow: auto;
}

div {
  resize: both;
  overflow: auto;
  width: 120px;
  height: 120px;
  margin: 0px;
  padding: 0px;
  border: 1px solid black;
  display:block;

}

td div {
  border: 0;
  width: auto;
  height: auto;
  min-height: 20px;
  min-width: 20px;
}
<table>
  <tr>
    <td><div>one</div></td>
    <td><div>two</div></td>
    <td><div>three</div></td>
  </tr>
  <tr>
    <td><div>four</div></td>
    <td><div>five</div></td>
    <td><div>six</div></td>        
  </tr>
  <tr>
    <td><div>seven</div></td>
    <td><div>eight</div></td>
    <td><div>nine</div></td>       
  </tr>   
</table>
32
Jishnu V S