html - サイズ変更時のテーブルの列の崩壊を防ぐにはどうすればよいですか？

私は以下のhtmlページを持っています。html - サイズ変更時のテーブルの列の崩壊を防ぐにはどうすればよいですか？

#dash-board-container { 
 
    height: 100%; 
 
    width: 100%; 
 
} 
 

 
.quote_list_container { 
 
    max-height: 100%; 
 
    max-width: 100%; 
 
    overflow: auto; 
 
} 
 

 
table { 
 
    table-layout: fixed; 
 
    white-space: nowrap; 
 
    width: 100%; 
 
} 
 

 
tr td { 
 
    border: solid 1px #000; 
 
    white-space: nowrap; 
 
    overflow: hidden; 
 
    min-width: 100px; 
 
} 
 

 
tr th { 
 
    overflow: hidden; 
 
    white-space: nowrap; 
 
    border: solid 1px #000; 
 
    min-width: 100px; 
 
}

<!DOCTYPE html> 
 
<html> 
 
    <body> 
 
    <div id="dash-board-container"> 
 
     <div class="quote_list_container"> 
 
     <table> 
 
      <colgroup> 
 
      <col width="300" /> 
 
      <col width="100" /> 
 
      <col width="100%" /> 
 
      </colgroup> 
 
      <thead> 
 
      <tr> 
 
       <th>Names</th> 
 
       <th>Names</th> 
 
       <th>Names</th> 
 
      </tr> 
 
      </thead> 
 
      <tbody> 
 
      <tr> 
 
       <td>ggggggggg</td> 
 
       <td>ggggggggg</td> 
 
       <td>ggggggggg</td> 
 
      </tr> 
 
      </tbody> 
 
     </table> 
 
     </div> 
 
    </div> 
 
    </body> 
 
</html>

私は左にウィンドウのサイズを変更すると、最後の列は0PX幅を取得し、私はリサイズ続けば、その後、それがスクロールを開始します。最後の列幅を100％に設定すると、表のサイズ変更時に他の列のサイズ変更を防ぐことができます。

最後の列が折りたたまれないようにするにはどうすればよいですか？その代わりに、最後の列を最小限にしてコンテンツの幅に合わせ、スクロールを開始したいと考えています。

出典

2017-03-21 GhfDllT

"tr td"のオーバーフローをAuto（スクロールを有効にする）に設定するだけです。次に、テーブル全体の最小幅を選択します（サイズ変更を防ぐため）。私は700px（300 + 100 + 300）の幅を選んだ。

実例は以下のコードを参照してください。

#dash-board-container { 
 
      height: 100%; 
 
      width: 100%; 
 
     } 
 

 
     .quote_list_container { 
 
      max-height: 100%; 
 
      max-width: 100%; 
 
      overflow: auto; 
 
     } 
 

 
     table { 
 
      table-layout: fixed; 
 
      width: 700px; 
 
     } 
 

 
     tr td { 
 
      border: solid 1px #000; 
 
      overflow: auto; 
 
      white-space: nowrap; 
 
      overflow: hidden; 
 
      max-width: 300px; 
 
     } 
 

 
     tr th { 
 
      overflow: hidden; 
 

 
      white-space: nowrap; 
 
      border: solid 1px #000; 
 
      min-width: 100px; 
 
     } 
 

 
     table td + td + td { 
 
     width:300px; 
 
     }

<!DOCTYPE html> 
 
<html> 
 

 
<body> 
 
<div id="dash-board-container"> 
 
    <div class="quote_list_container"> 
 
     <table> 
 
      <colgroup> 
 
       <col width="300"/> 
 
       <col width="100"/> 
 
       <col width="300"/> 
 
      </colgroup> 
 
      <thead> 
 
      <tr> 
 
       <th>Names</th> 
 
       <th>Names</th> 
 
       <th>Names</th> 
 
      </tr> 
 
      </thead> 
 
      <tbody> 
 
      <tr> 
 
       <td>ggggggggg</td> 
 
       <td>ggggggggg</td> 
 
       <td>ggggggggg</td> 
 
      </tr> 
 
      </tbody> 
 
     </table> 
 
    </div> 
 
</div> 
 
</body> 
 
</html>

出典

2017-03-21 18:42:32 Staveven

html - サイズ変更時のテーブルの列の崩壊を防ぐにはどうすればよいですか？

答えて

関連する問題