Q&A
実現したいこと
親の要素の幅がmax-width:1200pxとなっているとき、
子孫要素にあるテーブルの幅が1200pxを超えているときにoverflow:autoとしているのですが、スクロールバーが出てきません。
どのようにしたら出てきますか？
前提
ここに質問の内容を詳しく書いてください。
（例）
TypeScriptで●●なシステムを作っています。
■■な機能を実装中に以下のエラーメッセージが発生しました。
発生している問題・エラーメッセージ
エラーメッセージ
該当のソースコード
html
1<!DOCTYPE html> 2<html> 3<head> 4 <meta charset="UTF-8"> 5 <title>ページタイトル</title> 6</head> 7<body> 8 9 <div style="max-width:1200px;width:auto;margin:0 auto;background-color:red;"> 10 <div> 11 <div> 12 <table>- 13 <tr style="background-color:pink;"> 14 <th style="width:300px;">カラム1</th><th style="width:300px;">カラム2</th><th style="width:300px;">カラム3</th> 15 <th style="width:300px;">カラム4</th><th style="width:300px;">カラム5</th><th style="width:300px;">カラム5</th><th style="width:300px;">カラム5</th> 16 17 </tr> 18 </table> 19 </div> 20 </div> 21</div> 22 23</body> 24</html>
css
1.container{ 2max-width:1200px; 3width:auto; 4margin: 0 auto; 5} 6th{ 7 width:300px; 8}
試したこと
ここに問題に対して試したことを記載してください。
補足情報（FW/ツールのバージョンなど）
ここにより詳細な情報を記載してください。
回答2件
0
tableに幅を指定していないので、親要素の幅に自動調整されますのでスクロールバーは出てきません。
tableにご希望の幅を設定してください。
HTMLでは各列の幅300pxで7列あるのでこの設定どおりに表示するにはtableの幅は2100pxにする必要があると思われます。
また、table-layout: fixed;を指定しておかないとセルの内容に応じて幅が自動調整されますので、列幅300pxに固定したいなら、この設定も必要です。
html
1<div style="max-width:1200px;width:auto;margin:0 auto;background-color:red; overflow: auto;"> 2 <div> 3 <div> 4 <table style="table-layout: fixed; width: 2100px;"> 5 <tr style="background-color:pink;"> 6 <th style="width:300px;">カラム1</th> 7 <th style="width:300px;">カラム2</th> 8 <th style="width:300px;">カラム3</th> 9 <th style="width:300px;">カラム4</th> 10 <th style="width:300px;">カラム5</th> 11 <th style="width:300px;">カラム5</th> 12 <th style="width:300px;">カラム5</th> 13 </tr> 14 </table> 15 </div> 16 </div> 17</div>
投稿2023/03/12 02:42
総合スコア32608
0
■原因
スクロールバーが表示されない原因は、overflow:autoを設定している要素の高さが自動的に調整されているからだと思います。
■対応
親要素である<div>にheightを設定して、子孫要素のテーブルがmax-widthを超えた場合にスクロールバーを表示するように指定すレバ良いのではないでしょうか
html
1<div style="max-width:1200px;width:auto;margin:0 auto;background-color:red; height: 100px; overflow: auto;">
height: 100px;の部分は調整してください
投稿2023/03/11 09:47
総合スコア78
あなたの回答
tips
プレビュー
下記のような回答は推奨されていません。
このような回答には修正を依頼しましょう。