带有列和标题粘性的可滚动表格
编辑：
table {
border: 1px solid white;
text-align: center;
padding: 6px;
background: #e1edf9;
}
td {
border: 1px solid white;
text-align: center;
padding: 8px;
min-width: 120px;
}
td:first-child,
th:first-child {
background-color: #003a6a !important;
color: white !important;
}
@media screen and (max-width: 780px) {
.table-scroll {
position: relative;
width: 100%;
z-index: 1;
margin: auto;
overflow: auto;
}
.table-scroll table {
width: 100%;
min-width: 1280px;
margin: auto;
/* border-collapse: separate;*/
border-spacing: 0;
}
.header {
top: 0;
position: sticky;
z-index: 10000;
}
.side_header {
position: sticky;
left: 0;
z-index: 20000;
}
.common_header {
top: 0;
left: 0;
position: sticky;
z-index: 30000;
}
}<div>
<table>
<tbody>
<tr>
<th>Header-1</th>
<th>Header-2</th>
<th>Header-3</th>
<th>Header-4</th>
<th>Header-5</th>
<th>Header-5</th>
<th>Header-4</th>
<th>Header-5</th>
<th>Header-5</th>
</tr>
<tr>
<td>Cell-1</td>
<td>Cell-2</td>
<td>Cell-3</td>
<td>Cell-4</td>
<td>Cell-5</td>
<td>Cell-2</td>
<td>Cell-3</td>
<td>Cell-4</td>
<td>Cell-5</td>
</tr>
<tr>
<td>Cell-7</td>
<td>Cell-8</td>
<td>Cell-9</td>
<td>Cell-10</td>
<td>Cell-11</td>
<td>Cell-2</td>
<td>Cell-3</td>
<td>Cell-4</td>
<td>Cell-5</td>
</tr>
<tr>
<td>Cell-7</td>
<td>Cell-8</td>
<td>Cell-9</td>
<td>Cell-10</td>
<td>Cell-11</td>
<td>Cell-2</td>
<td>Cell-3</td>
<td>Cell-4</td>
<td>Cell-5</td>
</tr>
<tr>
<td>Cell-7</td>
<td>Cell-8</td>
<td>Cell-9</td>
<td>Cell-10</td>
<td>Cell-11</td>
<td>Cell-2</td>
<td>Cell-3</td>
<td>Cell-4</td>
<td>Cell-5</td>
</tr>
<tr>
<td>Cell-7</td>
<td>Cell-8</td>
<td>Cell-9</td>
<td>Cell-10</td>
<td>Cell-11</td>
<td>Cell-2</td>
<td>Cell-3</td>
<td>Cell-4</td>
<td>Cell-5</td>
</tr>
<tr>
<td>Cell-7</td>
<td>Cell-8</td>
<td>Cell-9</td>
<td>Cell-10</td>
<td>Cell-11</td>
<td>Cell-2</td>
<td>Cell-3</td>
<td>Cell-4</td>
<td>Cell-5</td>
</tr>
<tr>
<td>Cell-7</td>
<td>Cell-8</td>
<td>Cell-9</td>
<td>Cell-10</td>
<td>Cell-11</td>
<td>Cell-2</td>
<td>Cell-3</td>
<td>Cell-4</td>
<td>Cell-5</td>
</tr>
<tr>
<td>Cell-7</td>
<td>Cell-8</td>
<td>Cell-9</td>
<td>Cell-10</td>
<td>Cell-11</td>
<td>Cell-2</td>
<td>Cell-3</td>
<td>Cell-4</td>
<td>Cell-5</td>
</tr>
<tr>
<td>Cell-7</td>
<td>Cell-8</td>
<td>Cell-9</td>
<td>Cell-10</td>
<td>Cell-11</td>
<td>Cell-2</td>
<td>Cell-3</td>
<td>Cell-4</td>
<td>Cell-5</td>
</tr>
<tr>
<td>Cell-7</td>
<td>Cell-8</td>
<td>Cell-9</td>
<td>Cell-10</td>
<td>Cell-11</td>
<td>Cell-2</td>
<td>Cell-3</td>
<td>Cell-4</td>
<td>Cell-5</td>
</tr>
<tr>
<td>Cell-7</td>
<td>Cell-8</td>
<td>Cell-9</td>
<td>Cell-10</td>
<td>Cell-11</td>
<td>Cell-2</td>
<td>Cell-3</td>
<td>Cell-4</td>
<td>Cell-5</td>
</tr>
<tr>
<td>Cell-7</td>
<td>Cell-8</td>
<td>Cell-9</td>
<td>Cell-10</td>
<td>Cell-11</td>
<td>Cell-2</td>
<td>Cell-3</td>
<td>Cell-4</td>
<td>Cell-5</td>
</tr>
<tr>
<td>Cell-7</td>
<td>Cell-8</td>
<td>Cell-9</td>
<td>Cell-10</td>
<td>Cell-11</td>
<td>Cell-2</td>
<td>Cell-3</td>
<td>Cell-4</td>
<td>Cell-5</td>
</tr>
<tr>
<td>Cell-7</td>
<td>Cell-8</td>
<td>Cell-9</td>
<td>Cell-10</td>
<td>Cell-11</td>
<td>Cell-2</td>
<td>Cell-3</td>
<td>Cell-4</td>
<td>Cell-5</td>
</tr>
<tr>
<td>Cell-7</td>
<td>Cell-8</td>
<td>Cell-9</td>
<td>Cell-10</td>
<td>Cell-11</td>
<td>Cell-2</td>
<td>Cell-3</td>
<td>Cell-4</td>
<td>Cell-5</td>
</tr>
<tr>
<td>Cell-7</td>
<td>Cell-8</td>
<td>Cell-9</td>
<td>Cell-10</td>
<td>Cell-11</td>
<td>Cell-2</td>
<td>Cell-3</td>
<td>Cell-4</td>
<td>Cell-5</td>
</tr>
<tr>
<td>Cell-7</td>
<td>Cell-8</td>
<td>Cell-9</td>
<td>Cell-10</td>
<td>Cell-11</td>
<td>Cell-2</td>
<td>Cell-3</td>
<td>Cell-4</td>
<td>Cell-5</td>
</tr>
<tr>
<td>Cell-7</td>
<td>Cell-8</td>
<td>Cell-9</td>
<td>Cell-10</td>
<td>Cell-11</td>
<td>Cell-2</td>
<td>Cell-3</td>
<td>Cell-4</td>
<td>Cell-5</td>
</tr>
<tr>
<td>Cell-7</td>
<td>Cell-8</td>
<td>Cell-9</td>
<td>Cell-10</td>
<td>Cell-11</td>
<td>Cell-2</td>
<td>Cell-3</td>
<td>Cell-4</td>
<td>Cell-5</td>
</tr>
<tr>
<td>Cell-7</td>
<td>Cell-8</td>
<td>Cell-9</td>
<td>Cell-10</td>
<td>Cell-11</td>
<td>Cell-2</td>
<td>Cell-3</td>
<td>Cell-4</td>
<td>Cell-5</td>
</tr>
<tr>
<td>Cell-7</td>
<td>Cell-8</td>
<td>Cell-9</td>
<td>Cell-10</td>
<td>Cell-11</td>
<td>Cell-2</td>
<td>Cell-3</td>
<td>Cell-4</td>
<td>Cell-5</td>
</tr>
<tr>
<td>Cell-7</td>
<td>Cell-8</td>
<td>Cell-9</td>
<td>Cell-10</td>
<td>Cell-11</td>
<td>Cell-2</td>
<td>Cell-3</td>
<td>Cell-4</td>
<td>Cell-5</td>
</tr>
<tr>
<td>Cell-7</td>
<td>Cell-8</td>
<td>Cell-9</td>
<td>Cell-10</td>
<td>Cell-11</td>
<td>Cell-2</td>
<td>Cell-3</td>
<td>Cell-4</td>
<td>Cell-5</td>
</tr>
<tr>
<td>Cell-7</td>
<td>Cell-8</td>
<td>Cell-9</td>
<td>Cell-10</td>
<td>Cell-11</td>
<td>Cell-2</td>
<td>Cell-3</td>
<td>Cell-4</td>
<td>Cell-5</td>
</tr>
<tr>
<td>Cell-7</td>
<td>Cell-8</td>
<td>Cell-9</td>
<td>Cell-10</td>
<td>Cell-11</td>
<td>Cell-2</td>
<td>Cell-3</td>
<td>Cell-4</td>
<td>Cell-5</td>
</tr>
<tr>
<td>Cell-7</td>
<td>Cell-8</td>
<td>Cell-9</td>
<td>Cell-10</td>
<td>Cell-11</td>
<td>Cell-2</td>
<td>Cell-3</td>
<td>Cell-4</td>
<td>Cell-5</td>
</tr>
<tr>
<td>Cell-7</td>
<td>Cell-8</td>
<td>Cell-9</td>
<td>Cell-10</td>
<td>Cell-11</td>
<td>Cell-2</td>
<td>Cell-3</td>
<td>Cell-4</td>
<td>Cell-5</td>
</tr>
<tr>
<td>Cell-7</td>
<td>Cell-8</td>
<td>Cell-9</td>
<td>Cell-10</td>
<td>Cell-11</td>
<td>Cell-2</td>
<td>Cell-3</td>
<td>Cell-4</td>
<td>Cell-5</td>
</tr>
<tr>
<td>Cell-7</td>
<td>Cell-8</td>
<td>Cell-9</td>
<td>Cell-10</td>
<td>Cell-11</td>
<td>Cell-2</td>
<td>Cell-3</td>
<td>Cell-4</td>
<td>Cell-5</td>
</tr>
<tr>
<td>Cell-7</td>
<td>Cell-8</td>
<td>Cell-9</td>
<td>Cell-10</td>
<td>Cell-11</td>
<td>Cell-2</td>
<td>Cell-3</td>
<td>Cell-4</td>
<td>Cell-5</td>
</tr>
</tr>
</tbody>
</table>
</div>回答
我坚持问题的描述，即列和标题应该是粘性的。
输出图像：
这可能对你有用。
* {
font-family: 'arial';
}
.container {
max-width: 426px;
width: 100%;
height: 300px;
overflow-x: auto;
}
table {
border-collapse: collapse;
width: 626px;
}
tr td,
tr th {
box-shadow: 0px 0px 0px 1px white inset;
padding: 20px 50px;
}
td {
background: #e1edf9;
}
th {
background: #003a6a;
color: white;
white-space: nowrap;
}
.header {
top: 0;
position: sticky;
z-index: 10000;
}
.side_header {
position: sticky;
left: 0;
z-index: 20000;
}
.common_header {
top: 0;
left: 0;
position: sticky;
z-index: 30000;
}<div>
<table cellspacing="0">
<tr>
<th>Header-1</th>
<th>Header-2</th>
<th>Header-3</th>
<th>Header-4</th>
<th>Header-5</th>
</tr>
<tr>
<td>Cell-1</td>
<td>Cell-2</td>
<td>Cell-3</td>
<td>Cell-4</td>
<td>Cell-5</td>
</tr>
<tr>
<td>Cell-7</td>
<td>Cell-8</td>
<td>Cell-9</td>
<td>Cell-10</td>
<td>Cell-11</td>
</tr>
<tr>
<td>Cell-12</td>
<td>Cell-13</td>
<td>Cell-14</td>
<td>Cell-15</td>
<td>Cell-16</td>
</tr>
<tr>
<td>Cell-17</td>
<td>Cell-18</td>
<td>Cell-19</td>
<td>Cell-20</td>
<td>Cell-21</td>
</tr>
<tr>
<td>Cell-1</td>
<td>Cell-2</td>
<td>Cell-3</td>
<td>Cell-4</td>
<td>Cell-5</td>
</tr>
<tr>
<td>Cell-7</td>
<td>Cell-8</td>
<td>Cell-9</td>
<td>Cell-10</td>
<td>Cell-11</td>
</tr>
<tr>
<td>Cell-12</td>
<td>Cell-13</td>
<td>Cell-14</td>
<td>Cell-15</td>
<td>Cell-16</td>
</tr>
<tr>
<td>Cell-17</td>
<td>Cell-18</td>
<td>Cell-19</td>
<td>Cell-20</td>
<td>Cell-21</td>
</tr>
<tr>
<td>Cell-1</td>
<td>Cell-2</td>
<td>Cell-3</td>
<td>Cell-4</td>
<td>Cell-5</td>
</tr>
<tr>
<td>Cell-7</td>
<td>Cell-8</td>
<td>Cell-9</td>
<td>Cell-10</td>
<td>Cell-11</td>
</tr>
<tr>
<td>Cell-12</td>
<td>Cell-13</td>
<td>Cell-14</td>
<td>Cell-15</td>
<td>Cell-16</td>
</tr>
<tr>
<td>Cell-17</td>
<td>Cell-18</td>
<td>Cell-19</td>
<td>Cell-20</td>
<td>Cell-21</td>
</tr>
<tr>
<td>Cell-1</td>
<td>Cell-2</td>
<td>Cell-3</td>
<td>Cell-4</td>
<td>Cell-5</td>
</tr>
<tr>
<td>Cell-7</td>
<td>Cell-8</td>
<td>Cell-9</td>
<td>Cell-10</td>
<td>Cell-11</td>
</tr>
<tr>
<td>Cell-12</td>
<td>Cell-13</td>
<td>Cell-14</td>
<td>Cell-15</td>
<td>Cell-16</td>
</tr>
<tr>
<td>Cell-17</td>
<td>Cell-18</td>
<td>Cell-19</td>
<td>Cell-20</td>
<td>Cell-21</td>
</tr>
</table>
</div>