可滚动 table 带有列和 header 粘性
Scrollable table with column and header sticky
已编辑：
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 id="table-scroll" class="table-scroll">
<table id="data" class="main-table">
<tbody>
<tr>
<th class="common_header">Header-1</th>
<th class="header">Header-2</th>
<th class="header">Header-3</th>
<th class="header">Header-4</th>
<th class="header">Header-5</th>
<th class="header">Header-5</th>
<th class="header">Header-4</th>
<th class="header">Header-5</th>
<th class="header">Header-5</th>
</tr>
<tr>
<td class="side_header">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 class="side_header">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 class="side_header">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 class="side_header">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 class="side_header">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 class="side_header">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 class="side_header">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 class="side_header">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 class="side_header">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 class="side_header">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 class="side_header">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 class="side_header">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 class="side_header">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 class="side_header">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 class="side_header">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 class="side_header">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 class="side_header">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 class="side_header">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 class="side_header">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 class="side_header">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 class="side_header">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 class="side_header">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 class="side_header">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 class="side_header">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 class="side_header">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 class="side_header">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 class="side_header">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 class="side_header">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 class="side_header">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 class="side_header">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>
嗨，这是我的代码片段，我想创建粘性第一列和 header。基本上在移动视图中，我希望我的 table 可以滚动，但第一列（第 1-101 列）和 header(header1-header4) 保持粘性和以便它们始终可见。
我试图将第一行和第一列置为粘性，它适用于第一列并使其粘性但不适用于 header。有人可以帮忙吗？
table {
border: 1px solid white;
text-align: center;
padding: 6px;
background: #e1edf9;
}
td {
border: 1px solid white;
text-align: center;
padding: 6px;
}
td:first-child,
tr:first-child {
background-color: #003a6a !important;
color: white !important;
}
.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;
}
.table-wrap {
position: relative;
}
.table-scroll tr:first-child {
background: #333;
color: #fff;
position: -webkit-sticky;
position: sticky;
top: 0;
}
td:first-child {
position: -webkit-sticky;
position: sticky;
left: 0;
z-index: 2;
background: #ccc;
}
.table-scroll tfoot tr {
position: -webkit-sticky;
position: sticky;
bottom: 0;
background: #666;
color: #fff;
z-index:4;
}
@media screen and (max-width: 500px){
td:first-child {
position: -webkit-sticky;
position: sticky;
left: 0;
z-index: 2;
background: #ccc;
max-width: 140px;
}
tr:first-child {
position: -webkit-sticky;
position: sticky;
top: 0;
z-index: 2;
background: #ccc;
}
}
<div><p>"Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum."</p></div>
<div id="table-scroll" class="table-scroll">
<table id="main-table" class="main-table">
<tbody>
<tr>
<td><b>Headers</b></td>
<th><b>Header1</b>
<input type="checkbox" name="checkbox" value="checkbox">
</th>
<th><b>Header2</b>
<input type="checkbox" name="checkbox" value="checkbox">
</th>
<th><b>Header3</b>
<input type="checkbox" name="checkbox" value="checkbox">
</th>
<th><b>Header4</b>
<input type="checkbox" name="checkbox" value="checkbox">
</th>
</tr>
<tr>
<td>Cell content1</td>
<td>Cell content2</td>
<td>Cell content3</td>
<td>Cell content4</td>
<td>Cell content5</td>
</tr>
<tr>
<td>Cell content11</td>
<td>Cell content12</td>
<td>Cell content13</td>
<td>Cell content14</td>
<td>Cell content15</td>
</tr>
<tr>
<td>Cell content21</td>
<td>Cell content22</td>
<td>Cell content23</td>
<td>Cell content24</td>
<td>Cell content25</td>
</tr>
<tr>
<td>Cell content31</td>
<td>Cell content32</td>
<td>Cell content33</td>
<td>Cell content34</td>
<td>Cell content35</td>
</tr>
<tr>
<td>Cell content41</td>
<td>Cell content42</td>
<td>Cell content43</td>
<td>Cell content44</td>
<td>Cell content45</td>
</tr>
<tr>
<td>Cell content51</td>
<td>Cell content52</td>
<td>Cell content53</td>
<td>Cell content54</td>
<td>Cell content55</td>
</tr>
<tr>
<td>Cell content61</td>
<td>Cell content62</td>
<td>Cell content63</td>
<td>Cell content64</td>
<td>Cell content65</td>
</tr>
<tr>
<td>Cell content1</td>
<td>Cell content2</td>
<td>Cell content3</td>
<td>Cell content4</td>
<td>Cell content5</td>
</tr>
<tr>
<td>Cell content11</td>
<td>Cell content12</td>
<td>Cell content13</td>
<td>Cell content14</td>
<td>Cell content15</td>
</tr>
<tr>
<td>Cell content21</td>
<td>Cell content22</td>
<td>Cell content23</td>
<td>Cell content24</td>
<td>Cell content25</td>
</tr>
<tr>
<td>Cell content31</td>
<td>Cell content32</td>
<td>Cell content33</td>
<td>Cell content34</td>
<td>Cell content35</td>
</tr>
<tr>
<td>Cell content41</td>
<td>Cell content42</td>
<td>Cell content43</td>
<td>Cell content44</td>
<td>Cell content45</td>
</tr>
<tr>
<td>Cell content51</td>
<td>Cell content52</td>
<td>Cell content53</td>
<td>Cell content54</td>
<td>Cell content55</td>
</tr>
<tr>
<td>Cell content61</td>
<td>Cell content62</td>
<td>Cell content63</td>
<td>Cell content64</td>
<td>Cell content65</td>
</tr>
<tr>
<td>Cell content71</td>
<td>Cell content72</td>
<td>Cell content73</td>
<td>Cell content74</td>
<td>Cell content75</td>
</tr>
<tr>
<td>Cell content81</td>
<td>Cell content82</td>
<td>Cell content83</td>
<td>Cell content84</td>
<td>Cell content85</td>
</tr>
<tr>
<td>Cell content91</td>
<td>Cell content92</td>
<td>Cell content93</td>
<td>Cell content94</td>
<td>Cell content95</td>
</tr>
<tr>
<td>Cell content101</td>
<td>Cell content102</td>
<td>Cell content103</td>
<td>Cell content104</td>
<td>Cell content105</td>
</tr>
</tbody>
</table>
</div>
这个解决方案可能有点复杂，需要一些改进，但它确实有效。它使用 css position: fixed 来修复 header 行。但这会产生一些问题，可以使用 javascript 来克服（我使用 jQuery）。
一个问题是让 header 行与其他行一样宽，因为 position:fixed 弄乱了这些宽度，需要通过编程设置 tr 和单元格宽度来获得帮助.
由于您可能希望 header 行左右滚动，我们附加一个滚动事件监听器并根据 [=44] 的滚动位置向左或向右移动 header 行=].
希望这对你有用！
您还可以检查插件。 This one 好像能帮上忙。
顺便说一句：您有两个起始 <tr> 标记，从 header 行开始。你应该删除一个。
var $ = jQuery;
$(function(){
//set the width of the header row
var width = $("tr:nth-child(2)").width();
$("tr:first-child").width(width );
//set the width of all cells in the header row
var cellWidth = $("tr:nth-child(2) td").width();
$("tr:first-child td, th").width(cellWidth );
//make sure the table goes down a bit to make sure the headeer doesn't overlap the first row
var height = $("tr:nth-child(2)").height();
$('#table-scroll').css("margin-top", height);
//set table header scroll for if already scrolled when page loads
setScroll();
//bind an event listener to the table to detect scroll
$('#table-scroll').scroll(function() {
setScroll();
});
function setScroll(){
//get the scroll position and make sure the header goes left or right
var currentScrollPos = $('#table-scroll').scrollLeft();
$("tr:first-child").css("left", - currentScrollPos);
}
});
body{
margin: 0;
}
table {
border: 1px solid white;
text-align: center;
padding: 6px;
background: #e1edf9;
}
td {
border: 1px solid white;
text-align: center;
padding: 6px;
}
td:first-child,
tr:first-child {
background-color: #003a6a !important;
color: white !important;
}
.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;
padding:0;
margin:0;
}
.table-wrap {
position: relative;
}
.table-scroll tr:first-child {
background: #333;
color: #fff;
position: -webkit-sticky;
position: sticky;
top: 0;
position:fixed;
z-index:9999;
}
td:first-child {
//position: -webkit-sticky;
//position: sticky;
left: 0;
z-index: 2;
background: #ccc;
}
.table-scroll tfoot tr {
position: -webkit-sticky;
position: sticky;
bottom: 0;
background: #666;
color: #fff;
z-index:4;
}
@media screen and (max-width: 500px){
td{
//margin: 0;
padding: 6px 0;
}
td:first-child {
position: -webkit-sticky;
position: sticky;
left: 0;
z-index: 2;
background: #ccc;
//max-width: 140px;
}
tr:first-child {
position: -webkit-sticky;
position: sticky;
top: 0;
z-index: 2;
background: #ccc;
position:fixed;
z-index:1;
}
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="table-scroll" class="table-scroll">
<table id="main-table" class="main-table">
<tbody>
<tr>
<td><b>Headers</b></td>
<th><b>Header1</b>
<input type="checkbox" name="checkbox" value="checkbox">
</th>
<th><b>Header2</b>
<input type="checkbox" name="checkbox" value="checkbox">
</th>
<th><b>Header3</b>
<input type="checkbox" name="checkbox" value="checkbox">
</th>
<th><b>Header4</b>
<input type="checkbox" name="checkbox" value="checkbox">
</th>
<tr>
<td>Cell content1</td>
<td>Cell content2</td>
<td>Cell content3</td>
<td>Cell content4</td>
<td>Cell content5</td>
</tr>
<tr>
<td>Cell content11</td>
<td>Cell content12</td>
<td>Cell content13</td>
<td>Cell content14</td>
<td>Cell content15</td>
</tr>
<tr>
<td>Cell content21</td>
<td>Cell content22</td>
<td>Cell content23</td>
<td>Cell content24</td>
<td>Cell content25</td>
</tr>
<tr>
<td>Cell content31</td>
<td>Cell content32</td>
<td>Cell content33</td>
<td>Cell content34</td>
<td>Cell content35</td>
</tr>
<tr>
<td>Cell content41</td>
<td>Cell content42</td>
<td>Cell content43</td>
<td>Cell content44</td>
<td>Cell content45</td>
</tr>
<tr>
<td>Cell content51</td>
<td>Cell content52</td>
<td>Cell content53</td>
<td>Cell content54</td>
<td>Cell content55</td>
</tr>
<tr>
<td>Cell content61</td>
<td>Cell content62</td>
<td>Cell content63</td>
<td>Cell content64</td>
<td>Cell content65</td>
</tr>
<tr>
<td>Cell content1</td>
<td>Cell content2</td>
<td>Cell content3</td>
<td>Cell content4</td>
<td>Cell content5</td>
</tr>
<tr>
<td>Cell content11</td>
<td>Cell content12</td>
<td>Cell content13</td>
<td>Cell content14</td>
<td>Cell content15</td>
</tr>
<tr>
<td>Cell content21</td>
<td>Cell content22</td>
<td>Cell content23</td>
<td>Cell content24</td>
<td>Cell content25</td>
</tr>
<tr>
<td>Cell content31</td>
<td>Cell content32</td>
<td>Cell content33</td>
<td>Cell content34</td>
<td>Cell content35</td>
</tr>
<tr>
<td>Cell content41</td>
<td>Cell content42</td>
<td>Cell content43</td>
<td>Cell content44</td>
<td>Cell content45</td>
</tr>
<tr>
<td>Cell content51</td>
<td>Cell content52</td>
<td>Cell content53</td>
<td>Cell content54</td>
<td>Cell content55</td>
</tr>
<tr>
<td>Cell content61</td>
<td>Cell content62</td>
<td>Cell content63</td>
<td>Cell content64</td>
<td>Cell content65</td>
</tr>
<tr>
<td>Cell content71</td>
<td>Cell content72</td>
<td>Cell content73</td>
<td>Cell content74</td>
<td>Cell content75</td>
</tr>
<tr>
<td>Cell content81</td>
<td>Cell content82</td>
<td>Cell content83</td>
<td>Cell content84</td>
<td>Cell content85</td>
</tr>
<tr>
<td>Cell content91</td>
<td>Cell content92</td>
<td>Cell content93</td>
<td>Cell content94</td>
<td>Cell content95</td>
</tr>
<tr>
<td>Cell content101</td>
<td>Cell content102</td>
<td>Cell content103</td>
<td>Cell content104</td>
<td>Cell content105</td>
</tr>
</tbody>
</table>
</div>
我坚持了问题的描述，列和header应该是粘性的。
输出图像：
这可能适合你。
* {
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 class="container">
<table cellspacing="0">
<tr>
<th class="common_header">Header-1</th>
<th class="header">Header-2</th>
<th class="header">Header-3</th>
<th class="header">Header-4</th>
<th class="header">Header-5</th>
</tr>
<tr>
<td class="side_header">Cell-1</td>
<td>Cell-2</td>
<td>Cell-3</td>
<td>Cell-4</td>
<td>Cell-5</td>
</tr>
<tr>
<td class="side_header">Cell-7</td>
<td>Cell-8</td>
<td>Cell-9</td>
<td>Cell-10</td>
<td>Cell-11</td>
</tr>
<tr>
<td class="side_header">Cell-12</td>
<td>Cell-13</td>
<td>Cell-14</td>
<td>Cell-15</td>
<td>Cell-16</td>
</tr>
<tr>
<td class="side_header">Cell-17</td>
<td>Cell-18</td>
<td>Cell-19</td>
<td>Cell-20</td>
<td>Cell-21</td>
</tr>
<tr>
<td class="side_header">Cell-1</td>
<td>Cell-2</td>
<td>Cell-3</td>
<td>Cell-4</td>
<td>Cell-5</td>
</tr>
<tr>
<td class="side_header">Cell-7</td>
<td>Cell-8</td>
<td>Cell-9</td>
<td>Cell-10</td>
<td>Cell-11</td>
</tr>
<tr>
<td class="side_header">Cell-12</td>
<td>Cell-13</td>
<td>Cell-14</td>
<td>Cell-15</td>
<td>Cell-16</td>
</tr>
<tr>
<td class="side_header">Cell-17</td>
<td>Cell-18</td>
<td>Cell-19</td>
<td>Cell-20</td>
<td>Cell-21</td>
</tr>
<tr>
<td class="side_header">Cell-1</td>
<td>Cell-2</td>
<td>Cell-3</td>
<td>Cell-4</td>
<td>Cell-5</td>
</tr>
<tr>
<td class="side_header">Cell-7</td>
<td>Cell-8</td>
<td>Cell-9</td>
<td>Cell-10</td>
<td>Cell-11</td>
</tr>
<tr>
<td class="side_header">Cell-12</td>
<td>Cell-13</td>
<td>Cell-14</td>
<td>Cell-15</td>
<td>Cell-16</td>
</tr>
<tr>
<td class="side_header">Cell-17</td>
<td>Cell-18</td>
<td>Cell-19</td>
<td>Cell-20</td>
<td>Cell-21</td>
</tr>
<tr>
<td class="side_header">Cell-1</td>
<td>Cell-2</td>
<td>Cell-3</td>
<td>Cell-4</td>
<td>Cell-5</td>
</tr>
<tr>
<td class="side_header">Cell-7</td>
<td>Cell-8</td>
<td>Cell-9</td>
<td>Cell-10</td>
<td>Cell-11</td>
</tr>
<tr>
<td class="side_header">Cell-12</td>
<td>Cell-13</td>
<td>Cell-14</td>
<td>Cell-15</td>
<td>Cell-16</td>
</tr>
<tr>
<td class="side_header">Cell-17</td>
<td>Cell-18</td>
<td>Cell-19</td>
<td>Cell-20</td>
<td>Cell-21</td>
</tr>
</table>
</div>
.sticky {
position: -webkit-sticky;
position: sticky;
top: 0;
}
<nav class="sticky">Placeholder text<!-- Anything in here will stick and stay on-screen --></nav>
<p>Dummy text to enable scrolling...</p><p>Dummy text to enable scrolling...</p><p>Dummy text to enable scrolling...</p><p>Dummy text to enable scrolling...</p><p>Dummy text to enable scrolling...</p><p>Dummy text to enable scrolling...</p><p>Dummy text to enable scrolling...</p><p>Dummy text to enable scrolling...</p><p>Dummy text to enable scrolling...</p><p>Dummy text to enable scrolling...</p><p>Dummy text to enable scrolling...</p><p>Dummy text to enable scrolling...</p><p>Dummy text to enable scrolling...</p><p>Dummy text to enable scrolling...</p><p>Dummy text to enable scrolling...</p><p>Dummy text to enable scrolling...</p><p>Dummy text to enable scrolling...</p><p>Dummy text to enable scrolling...</p><p>Dummy text to enable scrolling...</p><p>Dummy text to enable scrolling...</p><p>Dummy text to enable scrolling...</p><p>Dummy text to enable scrolling...</p><p>Dummy text to enable scrolling...</p><p>Dummy text to enable scrolling...</p><p>Dummy text to enable scrolling...</p><p>Dummy text to enable scrolling...</p><p>Dummy text to enable scrolling...</p><p>Dummy text to enable scrolling...</p><p>Dummy text to enable scrolling...</p><p>Dummy text to enable scrolling...</p><p>Dummy text to enable scrolling...</p><p>Dummy text to enable scrolling...</p>
已编辑：
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 id="table-scroll" class="table-scroll">
<table id="data" class="main-table">
<tbody>
<tr>
<th class="common_header">Header-1</th>
<th class="header">Header-2</th>
<th class="header">Header-3</th>
<th class="header">Header-4</th>
<th class="header">Header-5</th>
<th class="header">Header-5</th>
<th class="header">Header-4</th>
<th class="header">Header-5</th>
<th class="header">Header-5</th>
</tr>
<tr>
<td class="side_header">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 class="side_header">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 class="side_header">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 class="side_header">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 class="side_header">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 class="side_header">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 class="side_header">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 class="side_header">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 class="side_header">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 class="side_header">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 class="side_header">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 class="side_header">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 class="side_header">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 class="side_header">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 class="side_header">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 class="side_header">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 class="side_header">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 class="side_header">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 class="side_header">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 class="side_header">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 class="side_header">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 class="side_header">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 class="side_header">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 class="side_header">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 class="side_header">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 class="side_header">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 class="side_header">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 class="side_header">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 class="side_header">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 class="side_header">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>
嗨，这是我的代码片段，我想创建粘性第一列和 header。基本上在移动视图中，我希望我的 table 可以滚动，但第一列（第 1-101 列）和 header(header1-header4) 保持粘性和以便它们始终可见。 我试图将第一行和第一列置为粘性，它适用于第一列并使其粘性但不适用于 header。有人可以帮忙吗？
table {
border: 1px solid white;
text-align: center;
padding: 6px;
background: #e1edf9;
}
td {
border: 1px solid white;
text-align: center;
padding: 6px;
}
td:first-child,
tr:first-child {
background-color: #003a6a !important;
color: white !important;
}
.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;
}
.table-wrap {
position: relative;
}
.table-scroll tr:first-child {
background: #333;
color: #fff;
position: -webkit-sticky;
position: sticky;
top: 0;
}
td:first-child {
position: -webkit-sticky;
position: sticky;
left: 0;
z-index: 2;
background: #ccc;
}
.table-scroll tfoot tr {
position: -webkit-sticky;
position: sticky;
bottom: 0;
background: #666;
color: #fff;
z-index:4;
}
@media screen and (max-width: 500px){
td:first-child {
position: -webkit-sticky;
position: sticky;
left: 0;
z-index: 2;
background: #ccc;
max-width: 140px;
}
tr:first-child {
position: -webkit-sticky;
position: sticky;
top: 0;
z-index: 2;
background: #ccc;
}
}
<div><p>"Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum."</p></div>
<div id="table-scroll" class="table-scroll">
<table id="main-table" class="main-table">
<tbody>
<tr>
<td><b>Headers</b></td>
<th><b>Header1</b>
<input type="checkbox" name="checkbox" value="checkbox">
</th>
<th><b>Header2</b>
<input type="checkbox" name="checkbox" value="checkbox">
</th>
<th><b>Header3</b>
<input type="checkbox" name="checkbox" value="checkbox">
</th>
<th><b>Header4</b>
<input type="checkbox" name="checkbox" value="checkbox">
</th>
</tr>
<tr>
<td>Cell content1</td>
<td>Cell content2</td>
<td>Cell content3</td>
<td>Cell content4</td>
<td>Cell content5</td>
</tr>
<tr>
<td>Cell content11</td>
<td>Cell content12</td>
<td>Cell content13</td>
<td>Cell content14</td>
<td>Cell content15</td>
</tr>
<tr>
<td>Cell content21</td>
<td>Cell content22</td>
<td>Cell content23</td>
<td>Cell content24</td>
<td>Cell content25</td>
</tr>
<tr>
<td>Cell content31</td>
<td>Cell content32</td>
<td>Cell content33</td>
<td>Cell content34</td>
<td>Cell content35</td>
</tr>
<tr>
<td>Cell content41</td>
<td>Cell content42</td>
<td>Cell content43</td>
<td>Cell content44</td>
<td>Cell content45</td>
</tr>
<tr>
<td>Cell content51</td>
<td>Cell content52</td>
<td>Cell content53</td>
<td>Cell content54</td>
<td>Cell content55</td>
</tr>
<tr>
<td>Cell content61</td>
<td>Cell content62</td>
<td>Cell content63</td>
<td>Cell content64</td>
<td>Cell content65</td>
</tr>
<tr>
<td>Cell content1</td>
<td>Cell content2</td>
<td>Cell content3</td>
<td>Cell content4</td>
<td>Cell content5</td>
</tr>
<tr>
<td>Cell content11</td>
<td>Cell content12</td>
<td>Cell content13</td>
<td>Cell content14</td>
<td>Cell content15</td>
</tr>
<tr>
<td>Cell content21</td>
<td>Cell content22</td>
<td>Cell content23</td>
<td>Cell content24</td>
<td>Cell content25</td>
</tr>
<tr>
<td>Cell content31</td>
<td>Cell content32</td>
<td>Cell content33</td>
<td>Cell content34</td>
<td>Cell content35</td>
</tr>
<tr>
<td>Cell content41</td>
<td>Cell content42</td>
<td>Cell content43</td>
<td>Cell content44</td>
<td>Cell content45</td>
</tr>
<tr>
<td>Cell content51</td>
<td>Cell content52</td>
<td>Cell content53</td>
<td>Cell content54</td>
<td>Cell content55</td>
</tr>
<tr>
<td>Cell content61</td>
<td>Cell content62</td>
<td>Cell content63</td>
<td>Cell content64</td>
<td>Cell content65</td>
</tr>
<tr>
<td>Cell content71</td>
<td>Cell content72</td>
<td>Cell content73</td>
<td>Cell content74</td>
<td>Cell content75</td>
</tr>
<tr>
<td>Cell content81</td>
<td>Cell content82</td>
<td>Cell content83</td>
<td>Cell content84</td>
<td>Cell content85</td>
</tr>
<tr>
<td>Cell content91</td>
<td>Cell content92</td>
<td>Cell content93</td>
<td>Cell content94</td>
<td>Cell content95</td>
</tr>
<tr>
<td>Cell content101</td>
<td>Cell content102</td>
<td>Cell content103</td>
<td>Cell content104</td>
<td>Cell content105</td>
</tr>
</tbody>
</table>
</div>
这个解决方案可能有点复杂，需要一些改进，但它确实有效。它使用 css position: fixed 来修复 header 行。但这会产生一些问题，可以使用 javascript 来克服（我使用 jQuery）。
一个问题是让 header 行与其他行一样宽，因为 position:fixed 弄乱了这些宽度，需要通过编程设置 tr 和单元格宽度来获得帮助.
由于您可能希望 header 行左右滚动，我们附加一个滚动事件监听器并根据 [=44] 的滚动位置向左或向右移动 header 行=].
希望这对你有用！
您还可以检查插件。 This one 好像能帮上忙。
顺便说一句：您有两个起始 <tr> 标记，从 header 行开始。你应该删除一个。
var $ = jQuery;
$(function(){
//set the width of the header row
var width = $("tr:nth-child(2)").width();
$("tr:first-child").width(width );
//set the width of all cells in the header row
var cellWidth = $("tr:nth-child(2) td").width();
$("tr:first-child td, th").width(cellWidth );
//make sure the table goes down a bit to make sure the headeer doesn't overlap the first row
var height = $("tr:nth-child(2)").height();
$('#table-scroll').css("margin-top", height);
//set table header scroll for if already scrolled when page loads
setScroll();
//bind an event listener to the table to detect scroll
$('#table-scroll').scroll(function() {
setScroll();
});
function setScroll(){
//get the scroll position and make sure the header goes left or right
var currentScrollPos = $('#table-scroll').scrollLeft();
$("tr:first-child").css("left", - currentScrollPos);
}
});
body{
margin: 0;
}
table {
border: 1px solid white;
text-align: center;
padding: 6px;
background: #e1edf9;
}
td {
border: 1px solid white;
text-align: center;
padding: 6px;
}
td:first-child,
tr:first-child {
background-color: #003a6a !important;
color: white !important;
}
.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;
padding:0;
margin:0;
}
.table-wrap {
position: relative;
}
.table-scroll tr:first-child {
background: #333;
color: #fff;
position: -webkit-sticky;
position: sticky;
top: 0;
position:fixed;
z-index:9999;
}
td:first-child {
//position: -webkit-sticky;
//position: sticky;
left: 0;
z-index: 2;
background: #ccc;
}
.table-scroll tfoot tr {
position: -webkit-sticky;
position: sticky;
bottom: 0;
background: #666;
color: #fff;
z-index:4;
}
@media screen and (max-width: 500px){
td{
//margin: 0;
padding: 6px 0;
}
td:first-child {
position: -webkit-sticky;
position: sticky;
left: 0;
z-index: 2;
background: #ccc;
//max-width: 140px;
}
tr:first-child {
position: -webkit-sticky;
position: sticky;
top: 0;
z-index: 2;
background: #ccc;
position:fixed;
z-index:1;
}
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="table-scroll" class="table-scroll">
<table id="main-table" class="main-table">
<tbody>
<tr>
<td><b>Headers</b></td>
<th><b>Header1</b>
<input type="checkbox" name="checkbox" value="checkbox">
</th>
<th><b>Header2</b>
<input type="checkbox" name="checkbox" value="checkbox">
</th>
<th><b>Header3</b>
<input type="checkbox" name="checkbox" value="checkbox">
</th>
<th><b>Header4</b>
<input type="checkbox" name="checkbox" value="checkbox">
</th>
<tr>
<td>Cell content1</td>
<td>Cell content2</td>
<td>Cell content3</td>
<td>Cell content4</td>
<td>Cell content5</td>
</tr>
<tr>
<td>Cell content11</td>
<td>Cell content12</td>
<td>Cell content13</td>
<td>Cell content14</td>
<td>Cell content15</td>
</tr>
<tr>
<td>Cell content21</td>
<td>Cell content22</td>
<td>Cell content23</td>
<td>Cell content24</td>
<td>Cell content25</td>
</tr>
<tr>
<td>Cell content31</td>
<td>Cell content32</td>
<td>Cell content33</td>
<td>Cell content34</td>
<td>Cell content35</td>
</tr>
<tr>
<td>Cell content41</td>
<td>Cell content42</td>
<td>Cell content43</td>
<td>Cell content44</td>
<td>Cell content45</td>
</tr>
<tr>
<td>Cell content51</td>
<td>Cell content52</td>
<td>Cell content53</td>
<td>Cell content54</td>
<td>Cell content55</td>
</tr>
<tr>
<td>Cell content61</td>
<td>Cell content62</td>
<td>Cell content63</td>
<td>Cell content64</td>
<td>Cell content65</td>
</tr>
<tr>
<td>Cell content1</td>
<td>Cell content2</td>
<td>Cell content3</td>
<td>Cell content4</td>
<td>Cell content5</td>
</tr>
<tr>
<td>Cell content11</td>
<td>Cell content12</td>
<td>Cell content13</td>
<td>Cell content14</td>
<td>Cell content15</td>
</tr>
<tr>
<td>Cell content21</td>
<td>Cell content22</td>
<td>Cell content23</td>
<td>Cell content24</td>
<td>Cell content25</td>
</tr>
<tr>
<td>Cell content31</td>
<td>Cell content32</td>
<td>Cell content33</td>
<td>Cell content34</td>
<td>Cell content35</td>
</tr>
<tr>
<td>Cell content41</td>
<td>Cell content42</td>
<td>Cell content43</td>
<td>Cell content44</td>
<td>Cell content45</td>
</tr>
<tr>
<td>Cell content51</td>
<td>Cell content52</td>
<td>Cell content53</td>
<td>Cell content54</td>
<td>Cell content55</td>
</tr>
<tr>
<td>Cell content61</td>
<td>Cell content62</td>
<td>Cell content63</td>
<td>Cell content64</td>
<td>Cell content65</td>
</tr>
<tr>
<td>Cell content71</td>
<td>Cell content72</td>
<td>Cell content73</td>
<td>Cell content74</td>
<td>Cell content75</td>
</tr>
<tr>
<td>Cell content81</td>
<td>Cell content82</td>
<td>Cell content83</td>
<td>Cell content84</td>
<td>Cell content85</td>
</tr>
<tr>
<td>Cell content91</td>
<td>Cell content92</td>
<td>Cell content93</td>
<td>Cell content94</td>
<td>Cell content95</td>
</tr>
<tr>
<td>Cell content101</td>
<td>Cell content102</td>
<td>Cell content103</td>
<td>Cell content104</td>
<td>Cell content105</td>
</tr>
</tbody>
</table>
</div>
我坚持了问题的描述，列和header应该是粘性的。
输出图像：
这可能适合你。
* {
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 class="container">
<table cellspacing="0">
<tr>
<th class="common_header">Header-1</th>
<th class="header">Header-2</th>
<th class="header">Header-3</th>
<th class="header">Header-4</th>
<th class="header">Header-5</th>
</tr>
<tr>
<td class="side_header">Cell-1</td>
<td>Cell-2</td>
<td>Cell-3</td>
<td>Cell-4</td>
<td>Cell-5</td>
</tr>
<tr>
<td class="side_header">Cell-7</td>
<td>Cell-8</td>
<td>Cell-9</td>
<td>Cell-10</td>
<td>Cell-11</td>
</tr>
<tr>
<td class="side_header">Cell-12</td>
<td>Cell-13</td>
<td>Cell-14</td>
<td>Cell-15</td>
<td>Cell-16</td>
</tr>
<tr>
<td class="side_header">Cell-17</td>
<td>Cell-18</td>
<td>Cell-19</td>
<td>Cell-20</td>
<td>Cell-21</td>
</tr>
<tr>
<td class="side_header">Cell-1</td>
<td>Cell-2</td>
<td>Cell-3</td>
<td>Cell-4</td>
<td>Cell-5</td>
</tr>
<tr>
<td class="side_header">Cell-7</td>
<td>Cell-8</td>
<td>Cell-9</td>
<td>Cell-10</td>
<td>Cell-11</td>
</tr>
<tr>
<td class="side_header">Cell-12</td>
<td>Cell-13</td>
<td>Cell-14</td>
<td>Cell-15</td>
<td>Cell-16</td>
</tr>
<tr>
<td class="side_header">Cell-17</td>
<td>Cell-18</td>
<td>Cell-19</td>
<td>Cell-20</td>
<td>Cell-21</td>
</tr>
<tr>
<td class="side_header">Cell-1</td>
<td>Cell-2</td>
<td>Cell-3</td>
<td>Cell-4</td>
<td>Cell-5</td>
</tr>
<tr>
<td class="side_header">Cell-7</td>
<td>Cell-8</td>
<td>Cell-9</td>
<td>Cell-10</td>
<td>Cell-11</td>
</tr>
<tr>
<td class="side_header">Cell-12</td>
<td>Cell-13</td>
<td>Cell-14</td>
<td>Cell-15</td>
<td>Cell-16</td>
</tr>
<tr>
<td class="side_header">Cell-17</td>
<td>Cell-18</td>
<td>Cell-19</td>
<td>Cell-20</td>
<td>Cell-21</td>
</tr>
<tr>
<td class="side_header">Cell-1</td>
<td>Cell-2</td>
<td>Cell-3</td>
<td>Cell-4</td>
<td>Cell-5</td>
</tr>
<tr>
<td class="side_header">Cell-7</td>
<td>Cell-8</td>
<td>Cell-9</td>
<td>Cell-10</td>
<td>Cell-11</td>
</tr>
<tr>
<td class="side_header">Cell-12</td>
<td>Cell-13</td>
<td>Cell-14</td>
<td>Cell-15</td>
<td>Cell-16</td>
</tr>
<tr>
<td class="side_header">Cell-17</td>
<td>Cell-18</td>
<td>Cell-19</td>
<td>Cell-20</td>
<td>Cell-21</td>
</tr>
</table>
</div>
.sticky {
position: -webkit-sticky;
position: sticky;
top: 0;
}
<nav class="sticky">Placeholder text<!-- Anything in here will stick and stay on-screen --></nav>
<p>Dummy text to enable scrolling...</p><p>Dummy text to enable scrolling...</p><p>Dummy text to enable scrolling...</p><p>Dummy text to enable scrolling...</p><p>Dummy text to enable scrolling...</p><p>Dummy text to enable scrolling...</p><p>Dummy text to enable scrolling...</p><p>Dummy text to enable scrolling...</p><p>Dummy text to enable scrolling...</p><p>Dummy text to enable scrolling...</p><p>Dummy text to enable scrolling...</p><p>Dummy text to enable scrolling...</p><p>Dummy text to enable scrolling...</p><p>Dummy text to enable scrolling...</p><p>Dummy text to enable scrolling...</p><p>Dummy text to enable scrolling...</p><p>Dummy text to enable scrolling...</p><p>Dummy text to enable scrolling...</p><p>Dummy text to enable scrolling...</p><p>Dummy text to enable scrolling...</p><p>Dummy text to enable scrolling...</p><p>Dummy text to enable scrolling...</p><p>Dummy text to enable scrolling...</p><p>Dummy text to enable scrolling...</p><p>Dummy text to enable scrolling...</p><p>Dummy text to enable scrolling...</p><p>Dummy text to enable scrolling...</p><p>Dummy text to enable scrolling...</p><p>Dummy text to enable scrolling...</p><p>Dummy text to enable scrolling...</p><p>Dummy text to enable scrolling...</p><p>Dummy text to enable scrolling...</p>