В приведенном примере при уменьшении ширины окна не появляется горизонтальной прокрутки таблицы.
Но если удалить стиль 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>
Средний
Простой
Простой