グリッドレイアウトでテーブルの横スクロールができません

Question

タイトル通り、テーブルの横スクロールができません。

<div class="test">
	<table>
		<tr><th>1-1</th><th>1-2</th><th>1-3</th><th>1-4</th><th>1-5</th></tr>
		<tr><td>2-1</td><td>2-2</td><td>2-3</td><td>2-4</td><td>2-5</td></tr>
		<tr><td>3-1</td><td>3-2</td><td>3-3</td><td>3-4</td><td>3-5</td></tr>
		<tr><td>4-1</td><td>4-2</td><td>4-3</td><td>4-4</td><td>4-5</td></tr>
	</table>
</div>

.test table{
	width:800px;
	text-align:center;
	border:1px solid #000;
	border-collapse:collapse;
}
.test th,.test td{
	border:1px solid #000;
	padding:5px;
}
@media screen and (max-width:600px){
	.test{
		overflow-x:auto;
		white-space:nowrap;
	}
}

上記がテーブル部分のみのコードで、これだけならきちんとスクロールできますので、この部分に間違いはないはずなのですが、現在XAMPPにて作成中のサイトに上記の通り書いてもスクロールができませんでした。
テーブル部分以外のCSSにできない原因があると思い、１つずつ削除しながら確認していきましたところ、#wrapper{display:grid}がなければ動くことが分かりました。
ですが、サイト全体のレイアウトに使用している部分のため、ここを変えなくてはならないとなると、サイト自体を１から作り直す必要があるため困っております。

レイアウトは、こちらのサイト様 の例にある『ヘッダー・メインコンテンツ・左右のサイドバー・フッターがあるレイアウト』とほぼ同じです。
上記サイト様の.containerの部分が#wrapperに当たり、テーブルがあるのは.mainの部分です。

グリッドレイアウトを完全に理解する前に使用してしまったのが悪いのですが、
このままテーブルの横スクロールをするには、どのようにしたら良いのでしょうか？

##追記です。

<div id="wrapper">
  <header class="header">header</header>
  <main class="main">
		<div class="test">
			<table>
				<tr><th>1-1</th><th>1-2</th><th>1-3</th><th>1-4</th><th>1-5</th></tr>
				<tr><td>2-1</td><td>2-2</td><td>2-3</td><td>2-4</td><td>2-5</td></tr>
				<tr><td>3-1</td><td>3-2</td><td>3-3</td><td>3-4</td><td>3-5</td></tr>
				<tr><td>4-1</td><td>4-2</td><td>4-3</td><td>4-4</td><td>4-5</td></tr>
			</table>
		</div>				
	</main>
  <aside class="aside">aside</aside>
  <nav class="nav">nav</nav>
  <footer class="footer">footer</footer>
</div>

#wrapper{
	display:grid;
	margin:0;
	min-height:100vh;
}
@media screen and (max-width:600px){
	#wrapper{
		grid-template-rows:50px 1fr 100px;
		grid-template-columns:1fr;
	}
	.header{
		grid-row:1;
	}
	.main{
		grid-row:2/3;
	}
	.aside{
		display:none;
	}
	.nav{
		display:none;
	}
	.footer{
		grid-row:3;
		grid-column:1/4;
	}
}
@media screen and (min-width:599px){
	#wrapper{
		grid-template-rows:50px 1fr 100px;
		grid-template-columns:250px 1fr 250px;
	}
	.header{
		grid-row:1;
		grid-column:1/4;
	}
	.main{
		grid-row:2;
		grid-column:2;
	}
	.nav{
		grid-row:2;
		grid-column:1;
	}
	.aside{
		grid-row:2;
		grid-column:3;
	}
	.footer{
		grid-row:3;
		grid-column:1/4;
	}
}
.test table{
	width:800px;
	text-align:center;
	border:1px solid #000;
	border-collapse:collapse;
}
.test th,.test td{
	border:1px solid #000;
	padding:5px;
}
@media screen and (max-width:600px){
	.test{
		overflow-x:auto;
		white-space:nowrap;
	}
}

Comments

[s8_chu]

念のため、 `display: grid` の宣言を含む HTML, CSS のすべてを質問文へ追記していただけませんか？

[hatena19]

> この部分に間違いはないはずなのですが、
間違いないところを提示するのではなく、wrapperも含めた症状の再現できるコード全体を提示できませんか。でないと、具体的に間違いを指摘するのは困難かと。
推測でしてもあっている保証はないので。

[pp3]

お二方ともありがとうございます。
明らかにテーブルのスクロールが出来ない事と関係のないプロパティ(背景色や文字色など)を省略していますが追記部分の通りです。

Answer 1

デフォルトでは min-width プロパティの算出値により、 grid アイテムはその内容よりも小さくなることは出来ません。.main クラスに対して min-width プロパティを設定するか、 overflow プロパティを visible 以外に設定することでこの問題を解決出来ます (動作確認用リンク)。

§ 6.6. Automatic Minimum Size of Grid Items

To provide a more reasonable default minimum size for grid items, this specification defines that the auto value of min-width/min-height also applies an automatic minimum size in the specified axis to grid items whose overflow is visible and which span at least one track whose min track sizing function is auto.

#wrapper {
  display: grid;
  margin: 0;
  min-height: 100vh;
}

@media screen and (max-width:600px) {
  #wrapper {
    grid-template-rows: 50px 1fr 100px;
    grid-template-columns: 1fr;
  }

  .header {
    grid-row: 1;
  }

  .main {
    grid-row: 2/3;
    min-width: 0; /* 追記 */
  }

  .aside {
    display: none;
  }

  .nav {
    display: none;
  }

  .footer {
    grid-row: 3;
    grid-column: 1/4;
  }
}

@media screen and (min-width:599px) {
  #wrapper {
    grid-template-rows: 50px 1fr 100px;
    grid-template-columns: 250px 1fr 250px;
  }

  .header {
    grid-row: 1;
    grid-column: 1/4;
  }

  .main {
    grid-row: 2;
    grid-column: 2;
  }

  .nav {
    grid-row: 2;
    grid-column: 1;
  }

  .aside {
    grid-row: 2;
    grid-column: 3;
  }

  .footer {
    grid-row: 3;
    grid-column: 1/4;
  }
}

.test table {
  width: 800px;
  text-align: center;
  border: 1px solid #000;
  border-collapse: collapse;
}

.test th,
.test td {
  border: 1px solid #000;
  padding: 5px;
}

@media screen and (max-width:600px) {
  .test {
    overflow-x: auto;
    white-space: nowrap;
  }
}

Comments

[pp3]

ありがとうございます！
思い通りになりました。
まだまだ知らないことが多そうなので、しっかり勉強してきます。
サンプルのデモまで作って頂いて、本当にありがとうございます。

[hatena19]

s8_chuさんのサンプルだと当方の環境では、画面幅か600px以下にならないとスクロールバーが出ないのですが、それでいいのでしょうか。
テーブル幅が800px固定なので見切れてしまいます。

[hatena19]

タイトルの「テーブルの横スクロール」ではなく「wrapper全体の横スクロール」でいいということかな？

Answer 2

テーブルの幅が固定ですので、グリッドアイテムの.mainと、.testにoverflow-xを設定してスクロールできるようにすればすればいいでしょう。

/*前略*/

.test table{
  width:800px; 
  text-align:center;
  border:1px solid #000;
  border-collapse:collapse;
}
.test th,.test td{
  border:1px solid #000;
  padding:5px;
}
/* この部分は削除
@media screen and (max-width:600px){
  .test{
    overflow-x:auto;
    white-space:nowrap;
  }
}
*/
/* 以下追加 */
.main {
  overflow-x: auto;
}
.test {
  overflow-x: auto;
  white-space:nowrap;
}

動作確認用Codepen

Comments

[pp3]

回答いただき、ありがとうございます。
.main に overflow-x を指定すると、メインの部分がまるごとスクロールされてしまうと思うのですが、違うのでしょうか...？
今回は、テーブルのみスクロールさせたかったためこちらの方法は使えなくて申し訳ないです。

[hatena19]

メインにテーブル以外の要素もあるのですね。
コード修正しました。サンプルも追加しました。