親の幅よりこの幅が広い時、スクロール表示出来ない

実現したいこと

親の要素の幅が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件

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

hatena19

総合スコア33715

■原因
スクロールバーが表示されない原因は、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

pikimaru

総合スコア78

あなたの回答

tips

プレビュー

行動規範の内容に同意します

質問の解決につながる回答をしましょう。サンプルコードなど、より具体的な説明があると質問者の理解の助けになります。また、読む側のことを考えた、分かりやすい文章を心がけましょう。

まだベストアンサーが選ばれていません

会員登録して回答してみよう

アカウントをお持ちの方は

15分調べてもわからないことは
teratailで質問しよう！

ただいまの回答率
85.48%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう！