@alexkuv

Как в области grid сделать горизонтальную прокрутку?

В приведенном примере при уменьшении ширины окна не появляется горизонтальной прокрутки таблицы.
Но если удалить стиль body, то все становится как надо (появляется горизонтальная прокрутка).
Кто может объяснить, почему в изначальном варианте нет прокрутки, и, главное, как это исправить?

<!doctype html>
<html>
<head>
<meta name="viewport" content="width=device-width,initial-scale=1,maximum-scale=1" />
<style>
html {height: 100%;}
body {display: grid; grid-template-rows: 50px auto max-content; max-width: 100%; min-height: 100%; margin: 0 auto; } /*стиль body*/
header {display: grid; border-bottom-width:1px; border-bottom-style:solid;}
main {max-width: 960px;  margin: 0 auto; padding:10px 5px 10px 5px;}
footer {display: grid; border-top-width:1px; border-top-style:solid; }   

table {border-collapse:collapse;}
table TD, TH {border: 1px solid #999}

.layer {
overflow-x: auto;
overflow-y: hidden;
padding-bottom:20px;
}
</style>
</head>
<body>

<header>header</header>

<main>
	<h2>Таблица</h2>
	  <div class="layer">
		<table>
		<tbody>
		<tr>
			<th>column_1</th>
			<th>column_2</th>
			<th>column_3</th>
			<th>column_4</th>
			<th>column_5</th>
			<th>column_6</th>
			<th>column_7</th>
			<th>column_8</th>
		</tr>
		<tr>
			<td>1</td>
			<td>2</td>
			<td>3</td>
			<td>4</td>
			<td>5</td>
			<td>6</td>
			<td>7</td>
			<td>8</th>
		</tr>
	
		<tr>
			<td>1</td>
			<td>2</td>
			<td>3</td>
			<td>4</td>
			<td>5</td>
			<td>6</td>
			<td>7</td>
			<td>8</th>
		</tr>
	
		</tbody>
		</table>
	  </div>
</main>

<footer>footer</footer>
</body>
</html>
  • Вопрос задан
  • 22 просмотра
Пригласить эксперта
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы