Липкий первый столбец, липкая шапка и горизонтальный скролл в таблице
Как сделать липкие шапку и первый столбец (полностью первые ячейки в tbody и в thead) таблицы с горизонтальным скроллом? Без ограничений в высоте таблицы
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
.table-container {
overflow-x: auto;
}
tr td, tr th {
padding: 30px;
}
thead {
position: sticky;
top: 0;
background-color: darksalmon;
z-index: 10;
}
tbody tr td:first-child {
position: sticky;
left: 0;
background-color: white;
}
</style>
</head>
<body>
<div class="table-container">
<table class="table">
<thead>
<tr>
<th>Heading 1</th>
<th>Heading 2</th>
<th>Heading 3</th>
<th>Heading 3</th>
<th>Heading 4</th>
<th>Heading 5</th>
<th>Heading 6</th>
</tr>
</thead>
<tbody>
<tr>
<td>Item 1.1</td>
<td>Item 1.2</td>
<td>Item 1.3</td>
<td>Item 1.4</td>
<td>Item 1.5</td>
<td>Item 1.6</td>
<td>Item 1.7</td>
</tr>
<tr>
<td>Item 2.1</td>
<td>Item 2.2</td>
<td>Item 2.3</td>
<td>Item 2.4</td>
<td>Item 2.5</td>
<td>Item 2.6</td>
<td>Item 2.7</td>
</tr>
<tr>
<td>Item 3.1</td>
<td>Item 3.2</td>
<td>Item 3.3</td>
<td>Item 3.4</td>
<td>Item 3.5</td>
<td>Item 3.6</td>
<td>Item 3.7</td>
</tr>
<tr>
<td>Item 4.1</td>
<td>Item 4.2</td>
<td>Item 4.3</td>
<td>Item 4.4</td>
<td>Item 4.5</td>
<td>Item 4.6</td>
<td>Item 4.7</td>
</tr>
<tr>
<td>Item 5.1</td>
<td>Item 5.2</td>
<td>Item 5.3</td>
<td>Item 5.4</td>
<td>Item 5.5</td>
<td>Item 5.6</td>
<td>Item 5.7</td>
</tr>
<tr>
<td>Item 6.1</td>
<td>Item 6.2</td>
<td>Item 6.3</td>
<td>Item 6.4</td>
<td>Item 6.5</td>
<td>Item 6.6</td>
<td>Item 6.7</td>
</tr>
<tr>
<td>Item 7.1</td>
<td>Item 7.2</td>
<td>Item 7.3</td>
<td>Item 7.4</td>
<td>Item 7.5</td>
<td>Item 7.6</td>
<td>Item 7.7</td>
</tr>
<tr>
<td>Item 8.1</td>
<td>Item 8.2</td>
<td>Item 8.3</td>
<td>Item 8.4</td>
<td>Item 8.5</td>
<td>Item 8.6</td>
<td>Item 8.7</td>
</tr>
<tr>
<td>Item 9.1</td>
<td>Item 9.2</td>
<td>Item 9.3</td>
<td>Item 9.4</td>
<td>Item 9.5</td>
<td>Item 9.6</td>
<td>Item 9.7</td>
</tr>
<tr>
<td>Item 10.1</td>
<td>Item 10.2</td>
<td>Item 10.3</td>
<td>Item 10.4</td>
<td>Item 10.5</td>
<td>Item 10.6</td>
<td>Item 10.7</td>
</tr>
<tr>
<td>Item 11.1</td>
<td>Item 11.2</td>
<td>Item 11.3</td>
<td>Item 11.4</td>
<td>Item 11.5</td>
<td>Item 11.6</td>
<td>Item 11.7</td>
</tr>
<tr>
<td>Item 12.1</td>
<td>Item 12.2</td>
<td>Item 12.3</td>
<td>Item 12.4</td>
<td>Item 12.5</td>
<td>Item 12.6</td>
<td>Item 12.7</td>
</tr>
<tr>
<td>Item 13.1</td>
<td>Item 13.2</td>
<td>Item 13.3</td>
<td>Item 13.4</td>
<td>Item 13.5</td>
<td>Item 13.6</td>
<td>Item 13.7</td>
</tr>
<tr>
<td>Item 14.1</td>
<td>Item 14.2</td>
<td>Item 14.3</td>
<td>Item 14.4</td>
<td>Item 14.5</td>
<td>Item 14.6</td>
<td>Item 14.7</td>
</tr>
<tr>
<td>Item 15.1</td>
<td>Item 15.2</td>
<td>Item 15.3</td>
<td>Item 15.4</td>
<td>Item 15.5</td>
<td>Item 15.6</td>
<td>Item 15.7</td>
</tr>
<tr>
<td>Item 16.1</td>
<td>Item 16.2</td>
<td>Item 16.3</td>
<td>Item 16.4</td>
<td>Item 16.5</td>
<td>Item 16.6</td>
<td>Item 16.7</td>
</tr>
<tr>
<td>Item 17.1</td>
<td>Item 17.2</td>
<td>Item 17.3</td>
<td>Item 17.4</td>
<td>Item 17.5</td>
<td>Item 17.6</td>
<td>Item 17.7</td>
</tr>
<tr>
<td>Item 18.1</td>
<td>Item 18.2</td>
<td>Item 18.3</td>
<td>Item 18.4</td>
<td>Item 18.5</td>
<td>Item 18.6</td>
<td>Item 18.7</td>
</tr>
<tr>
<td>Item 19.1</td>
<td>Item 19.2</td>
<td>Item 19.3</td>
<td>Item 19.4</td>
<td>Item 19.5</td>
<td>Item 19.6</td>
<td>Item 19.7</td>
</tr>
<tr>
<td>Item 20.1</td>
<td>Item 20.2</td>
<td>Item 20.3</td>
<td>Item 20.4</td>
<td>Item 20.5</td>
<td>Item 20.6</td>
<td>Item 20.7</td>
</tr>
</tbody>
</table>
</div>
</body>
</html>
Источник: Stack Overflow на русском