JSを使用せずにオーバーフローするdiv内のサイズ変更テーブル

すべての列の幅が、tableを含むdivよりも多くのピクセルを持つ場合、スクロール可能なテーブルの列のサイズを変更できますか？問題は、私は20列のようなものを持っていると私は列のサイズ変更の可能性とテーブルをスクロール可能にする必要があります。私はJS mousemove、mouseup、mousedownイベントで成功しましたが、私はCSSでそれをやろうとしています。例以下：JSを使用せずにオーバーフローするdiv内のサイズ変更テーブル

<div style="overflow-x:scroll;overflow-y:scroll;max-height:300px;max-width:500px;background-color:gray;"> 
    <table> 
    <thead> 
     <tr> 
      <th style="resize:horizontal;overflow: auto;">TESTTESTESTEST</th> 
      <th style="resize:horizontal;overflow: auto;">TESTTESTESTEST</th> 
      <th style="resize:horizontal;overflow: auto;">TESTTESTESTEST</th> 
      <th style="resize:horizontal;overflow: auto;">TESTTESTESTEST</th> 
      <th style="resize:horizontal;overflow: auto;">TESTTESTESTEST</th> 
      <th style="resize:horizontal;overflow: auto;">TESTTESTESTEST</th> 
     </tr> 
    </thead> 
    <tbody> 
     <tr> 
     <td>TESTTESTESTESTESTSTETSET</td> 
     <td>TESTTESTESTESTESTSTETSET</td> 
     <td>TESTTESTESTESTESTSTETSET</td> 
     <td>TESTTESTESTESTESTSTETSET</td> 
     <td>TESTTESTESTESTESTSTETSET</td> 
     <td>TESTTESTESTESTESTSTETSET</td> 
     </tr> 
    </tbody> 
    </table> 
</div>

出典

2017-11-15 radoix

チェックこのコードを、これはあなたが探しているものである場合：

<!DOCTYPE html> 
 
<html> 
 
<head> 
 
<style> 
 
table { 
 
    border-collapse: collapse; 
 
    border-spacing: 0; 
 
    width: 100%; 
 
    border: 1px solid #ddd; 
 
} 
 

 
th, td { 
 
    text-align: left; 
 
    padding: 8px; 
 
} 
 

 
tr:nth-child(even){background-color: #f2f2f2} 
 
</style> 
 
</head> 
 
<body> 
 

 
<h2>Table which can scroll and column will automatically resize</h2> 
 
<div style="overflow-x:auto;"> 
 
    <table> 
 
    <tr> 
 
     <th>First Name</th> 
 
     <th>Last Name</th> 
 
     <th>Points</th> 
 
     <th>Points</th> 
 
     <th>Points</th> 
 
     <th>Points</th> 
 
     <th>Points</th> 
 
     <th>Points</th> 
 
     <th>Points</th> 
 
     <th>Points</th> 
 
     <th>Points</th> 
 
     <th>Points</th> 
 
    </tr> 
 
    <tr> 
 
     <td>hello</td> 
 
     <td>bye</td> 
 
     <td>50</td> 
 
     <td>50</td> 
 
     <td>50</td> 
 
     <td>50</td> 
 
     <td>50</td> 
 
     <td>50</td> 
 
     <td>50</td> 
 
     <td>50</td> 
 
     <td>50</td> 
 
     <td>50</td> 
 
    </tr> 
 
    <tr> 
 
     <td>Abc</td> 
 
     <td>xyz</td> 
 
     <td>94</td> 
 
     <td>94</td> 
 
     <td>94</td> 
 
     <td>94</td> 
 
     <td>94</td> 
 
     <td>94</td> 
 
     <td>94</td> 
 
     <td>94</td> 
 
     <td>94</td> 
 
     <td>94</td> 
 
    </tr> 
 
    <tr> 
 
     <td>Arun</td> 
 
     <td>Kumar</td> 
 
     <td>67</td> 
 
     <td>67</td> 
 
     <td>67</td> 
 
     <td>67</td> 
 
     <td>67</td> 
 
     <td>67</td> 
 
     <td>67</td> 
 
     <td>67</td> 
 
     <td>67</td> 
 
     <td>67</td> 
 
    </tr> 
 
    </table> 
 
</div> 
 

 
</body> 
 
</html>

出典

2017-11-15 14:37:03 AKNair

私はそれをやりました！サイズ変更可能なコードのコード： '

TESTTESTESTEST

– radoix

これは素晴らしいです！上記のコードを実行するのに問題がある場合は、投稿を行います。 – AKNair

JSを使用せずにオーバーフローするdiv内のサイズ変更テーブル

答えて

関連する問題