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

Question

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

<th>要素の右端にあるclick/mousemoveイベントを捕まえることができたら、私は独自のサイズ変更ロジック（水平マウスの動きを監視し、それに応じて幅を調整する）を実装することができましたが、これは可能です（私が知る限り、要素境界関連イベントはありません）。

ユーザーが列をサイズ変更できるようにするにはどうすればよいですか？ jQueryを使わないで（できれば - Angular 2の文脈で）。

Answer 1

これを自分で実装したい場合は、おそらく複雑すぎるでしょう。

ag-grd

が予想されるすべてのテーブルアクションを処理する角度2のための優れたグリッド・ライブラリー（リサイズ、再オーダーなど...）

あなたは、プレーンJavaScriptのバージョンまたは2角度AG-グリッドを使用することができますですag-grid-ng2

「AG-グリッドからのコンポーネントは、エンタープライズグレードJavascriptをデータ・グリッドである。AG-グリッドの目的は、エンタープライズソフトウェアは、このようなレポート作成やデータ分析、ビジネスなどの建築用途に使用できるデータグリッドを提供することですワークフローおよびデータ入力」

あなたは番目のテーブル内のdivを入れて、TD、それのサイズを変更する必要がある理由

Answer 2

resizeプロパティテーブルでは動作しない、thatsの、以下にしようとしています

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>

Answer 3

をしませスニペット。代わりにブートストラップを使用してください。ブートストラップでエンドユーザーのサイズを変更できるようにします。
- デバイスの列サイズを変更するとうまくいかない - サーバーやブラウザで列幅を覚えてしまうことになり、多くの作業が終了する可能性があります。それはそこで終わるのだろうか？列の順序を変更する必要がありますか？それらは削除可能であるべきですか？エンドユーザーにすべてのものを戻すのではなく、いくつかのデザインを選択する方がよいでしょう。