具有粘性列和标头的可滚动表
具有粘性列和标头的可滚动表
提问于 2021-05-16 13:15:16
编辑：
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>
嗨，这是我的代码片段，我想要创建粘性的第一列和标题。基本上，在移动视图中，我希望我的表是可滚动的，但是第一列(列1-101)和标题(header 1-header 4)保持粘性，因此它们总是可见的。我试着把第一行和第一列粘起来，它是为第一列工作，并使它粘稠，但它不工作的标题。有人能帮忙吗？
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>
回答 3
Stack Overflow用户
回答已采纳
发布于 2021-05-20 08:09:49
我贴上了关于列和标题应该是粘性的问题的描述。
输出图像：
这可能对你有用。
* {
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>
Stack Overflow用户
发布于 2021-05-19 20:20:45
这个解决方案可能有点复杂，需要一些改进，但它有效。它使用css position: fixed来修复标题行。但是，这会产生一些问题，可以用javascript来克服(我使用了jQuery)。
一个问题是使标题行与其他行一样宽，因为position:fixed扰乱了这些宽度，需要通过编程设置tr和单元格宽度来帮助。
由于您可能希望标题行向左和向右滚动，因此我们附加一个滚动eventListener，并根据表的滚动位置向左或向右移动标题行。
希望这件事适合你！
您也可以检查插件。这一个似乎能帮上忙。
顺便说一句:您有两个开头的<tr>标记，它们开始于标题行。你应该移除一个。
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>
Stack Overflow用户
发布于 2021-05-20 16:13:54
.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>
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/67557117
复制相关文章
相似问题
腾讯云开发者
Copyright © 2013 - 2026 Tencent Cloud. All Rights Reserved. 腾讯云 版权所有
深圳市腾讯计算机系统有限公司 ICP备案/许可证号：粤B2-20090059 
粤公网安备44030502008569号
腾讯云计算（北京）有限责任公司 京ICP证150476号 | 京ICP备11018762号