固定位置 table header 延伸出屏幕
Fixed position table header extends off the screen
我的布局具有固定的顶部 header、固定的左侧边栏和可滚动的右侧内容区域。内容包括一个长 table，我想在粘性 header.
下方滚动
我创建了一个单独的 table 只是为了 header 的目的，在我添加任何 fixed-position 样式之前一切都很好。当我放置 position-fixed 时，header 会粘住但它会延伸出屏幕（可能是由于侧边栏的偏移？）有没有办法让它延伸到屏幕的整个宽度，就像table 本身？这是 fiddle，我对 CSS 中导致问题的行发表了评论：
https://jsfiddle.net/7wgnosr1/14/
body,
html {
height: 100%;
min-height: 100%;
margin: 0;
}
.container {
height: 100%;
min-height: 100%;
display: flex;
flex-direction: column;
}
header {
z-index: 0;
flex: 0 64px;
display: flex;
background: #f4991a;
}
main {
flex: 1;
display: flex;
background: #f9f5f0;
overflow: auto;
}
aside {
background: #f2ead3;
flex: 0 0 300px;
overflow: auto;
order: 0;
border-right: 1px solid #d9d9d9;
display: flex;
flex-direction: column;
}
section {
background: #f3f3f5;
flex: 1 1 100px;
order: 1;
overflow: auto;
}
table.fixed {
position: fixed;
/* If I comment this out, it aligns correctly but does not stick */
}
table {
text-align: left;
width: 100%;
padding: 10px;
background-color: white;
}
<div class="container">
<header>
Fixed Header
</header>
<main>
<aside>
Fixed Sidebar
</aside>
<section>
<table class="fixed">
<thead>
<tr>
<th>Fixed TH 1</th>
<th>Fixed TH 2</th>
<th>Fixed TH 3</th>
</tr>
</thead>
</table>
<table>
<tbody>
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
</tr>
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
</tr>
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
</tr>
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
</tr>
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
</tr>
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
</tr>
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
</tr>
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
</tr>
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
</tr>
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
</tr>
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
</tr>
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
</tr>
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
</tr>
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
</tr>
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
</tr>
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
</tr>
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
</tr>
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
</tr>
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
</tr>
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
</tr>
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
</tr>
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
</tr>
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
</tr>
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
</tr>
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
</tr>
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
</tr>
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
</tr>
</tbody>
</table>
</section>
</main>
</div>
<table class="fixed"> // with position fixed, it sticks but extends off the screen
<thead>
<tr>
<th>Fixed TH 1</th>
<th>Fixed TH 2</th>
<th>Fixed TH 3</th>
</tr>
</thead>
</table>
<table>
<tbody>
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
</tr>
... lots more rows
</tbody>
</table>
实际上，一切正常，因为根据文档，固定元素是相对于浏览器 window 定位的，并且 table 的 header 的宽度等于windows 的那个。如果您的侧边栏将始终具有固定宽度（例如 300px），您可以像这样为 table header 设置限制：
table.fixed {
position: fixed;
max-width: calc(100% - 300px);
}
更新： 正如评论中提到的 position: sticky 即将到来。 Google Chrome 56+ supports it for th elements and other modern browsers already started to go in this direction。你说它在 Chrome 上对你不起作用 63. 你是否正确设置了阈值？仅设置 position: sticky 是不够的：
body,
html {
height: 100%;
min-height: 100%;
margin: 0;
}
.container {
height: 100%;
min-height: 100%;
display: flex;
flex-direction: column;
}
header {
z-index: 0;
flex: 0 64px;
display: flex;
background: #f4991a;
}
main {
flex: 1;
display: flex;
background: #f9f5f0;
overflow: auto;
}
aside {
background: #f2ead3;
flex: 0 0 300px;
overflow: auto;
order: 0;
border-right: 1px solid #d9d9d9;
display: flex;
flex-direction: column;
}
section {
background: #f3f3f5;
flex: 1 1 100px;
order: 1;
overflow: auto;
}
table {
text-align: left;
width: 100%;
background-color: white;
border-collapse: collapse;
}
th {
position: sticky;
top: 0;
background-color: #fff;
}
td, th {
padding: 5px;
}
<div class="container">
<header>
Fixed Header
</header>
<main>
<aside>
Fixed Sidebar
</aside>
<section>
<table>
<thead>
<tr>
<th>Fixed TH 1</th>
<th>Fixed TH 2</th>
<th>Fixed TH 3</th>
</tr>
</thead>
<tbody>
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
</tr>
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
</tr>
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
</tr>
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
</tr>
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
</tr>
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
</tr>
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
</tr>
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
</tr>
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
</tr>
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
</tr>
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
</tr>
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
</tr>
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
</tr>
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
</tr>
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
</tr>
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
</tr>
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
</tr>
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
</tr>
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
</tr>
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
</tr>
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
</tr>
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
</tr>
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
</tr>
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
</tr>
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
</tr>
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
</tr>
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
</tr>
</tbody>
</table>
</section>
</main>
</div>
我建议使用嵌套的flexbox布局，不需要固定位置。
在第二个 table 周围添加了一个 div 容器。即使内容长度不同，也要为等宽单元格设置 table-layout: fixed;。
<section>
<table>
...
</table>
<div class="scroll-area">
<table>
...
</table>
</div>
</section>
section {
display: flex;
flex-direction: column;
}
table {
table-layout: fixed;
width: 100%;
}
.scroll-area {
flex: 1;
overflow: auto;
}
body,
html {
height: 100%;
min-height: 100%;
margin: 0;
}
.container {
height: 100%;
min-height: 100%;
display: flex;
flex-direction: column;
}
header {
z-index: 0;
flex: 0 64px;
display: flex;
background: #f4991a;
}
main {
flex: 1;
display: flex;
background: #f9f5f0;
overflow: auto;
}
aside {
background: #f2ead3;
flex: 0 0 300px;
overflow: auto;
order: 0;
border-right: 1px solid #d9d9d9;
display: flex;
flex-direction: column;
}
section {
background: #f3f3f5;
flex: 1 1 100px;
}
section {
display: flex;
flex-direction: column;
}
table {
text-align: left;
table-layout: fixed;
width: 100%;
padding: 10px;
background-color: white;
}
.scroll-area {
flex: 1;
overflow: auto;
}
<div class="container">
<header>
Fixed Header
</header>
<main>
<aside>
Fixed Sidebar
</aside>
<section>
<table>
<thead>
<tr>
<th>Fixed TH 1</th>
<th>Fixed TH 2</th>
<th>Fixed TH 3</th>
</tr>
</thead>
</table>
<div class="scroll-area">
<table>
<tbody>
<tr><td>1 first cell</td><td>2</td><td>3</td></tr>
<tr><td>1</td><td>2</td><td>3</td></tr>
<tr><td>1</td><td>2</td><td>3</td></tr>
<tr><td>1</td><td>2</td><td>3</td></tr>
<tr><td>1</td><td>2</td><td>3</td></tr>
<tr><td>1</td><td>2</td><td>3</td></tr>
<tr><td>1</td><td>2</td><td>3</td></tr>
<tr><td>1</td><td>2</td><td>3</td></tr>
<tr><td>1</td><td>2</td><td>3</td></tr>
<tr><td>1</td><td>2</td><td>3</td></tr>
<tr><td>1</td><td>2</td><td>3</td></tr>
<tr><td>1</td><td>2</td><td>3</td></tr>
<tr><td>1</td><td>2</td><td>3</td></tr>
<tr><td>1</td><td>2</td><td>3</td></tr>
<tr><td>1</td><td>2</td><td>3</td></tr>
<tr><td>1</td><td>2</td><td>3</td></tr>
<tr><td>1</td><td>2</td><td>3</td></tr>
<tr><td>1</td><td>2</td><td>3</td></tr>
<tr><td>1</td><td>2</td><td>3</td></tr>
<tr><td>1</td><td>2</td><td>3</td></tr>
<tr><td>1</td><td>2</td><td>3</td></tr>
<tr><td>1</td><td>2</td><td>3</td></tr>
<tr><td>1</td><td>2</td><td>3</td></tr>
<tr><td>1</td><td>2</td><td>3</td></tr>
<tr><td>1</td><td>2</td><td>3</td></tr>
<tr><td>1</td><td>2</td><td>3</td></tr>
<tr><td>1</td><td>2</td><td>3</td></tr>
</tbody>
</table>
</div>
</section>
</main>
</div>
我的布局具有固定的顶部 header、固定的左侧边栏和可滚动的右侧内容区域。内容包括一个长 table，我想在粘性 header.
下方滚动我创建了一个单独的 table 只是为了 header 的目的，在我添加任何 fixed-position 样式之前一切都很好。当我放置 position-fixed 时，header 会粘住但它会延伸出屏幕（可能是由于侧边栏的偏移？）有没有办法让它延伸到屏幕的整个宽度，就像table 本身？这是 fiddle，我对 CSS 中导致问题的行发表了评论：
https://jsfiddle.net/7wgnosr1/14/
body,
html {
height: 100%;
min-height: 100%;
margin: 0;
}
.container {
height: 100%;
min-height: 100%;
display: flex;
flex-direction: column;
}
header {
z-index: 0;
flex: 0 64px;
display: flex;
background: #f4991a;
}
main {
flex: 1;
display: flex;
background: #f9f5f0;
overflow: auto;
}
aside {
background: #f2ead3;
flex: 0 0 300px;
overflow: auto;
order: 0;
border-right: 1px solid #d9d9d9;
display: flex;
flex-direction: column;
}
section {
background: #f3f3f5;
flex: 1 1 100px;
order: 1;
overflow: auto;
}
table.fixed {
position: fixed;
/* If I comment this out, it aligns correctly but does not stick */
}
table {
text-align: left;
width: 100%;
padding: 10px;
background-color: white;
}
<div class="container">
<header>
Fixed Header
</header>
<main>
<aside>
Fixed Sidebar
</aside>
<section>
<table class="fixed">
<thead>
<tr>
<th>Fixed TH 1</th>
<th>Fixed TH 2</th>
<th>Fixed TH 3</th>
</tr>
</thead>
</table>
<table>
<tbody>
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
</tr>
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
</tr>
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
</tr>
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
</tr>
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
</tr>
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
</tr>
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
</tr>
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
</tr>
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
</tr>
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
</tr>
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
</tr>
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
</tr>
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
</tr>
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
</tr>
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
</tr>
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
</tr>
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
</tr>
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
</tr>
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
</tr>
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
</tr>
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
</tr>
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
</tr>
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
</tr>
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
</tr>
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
</tr>
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
</tr>
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
</tr>
</tbody>
</table>
</section>
</main>
</div>
<table class="fixed"> // with position fixed, it sticks but extends off the screen
<thead>
<tr>
<th>Fixed TH 1</th>
<th>Fixed TH 2</th>
<th>Fixed TH 3</th>
</tr>
</thead>
</table>
<table>
<tbody>
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
</tr>
... lots more rows
</tbody>
</table>
实际上，一切正常，因为根据文档，固定元素是相对于浏览器 window 定位的，并且 table 的 header 的宽度等于windows 的那个。如果您的侧边栏将始终具有固定宽度（例如 300px），您可以像这样为 table header 设置限制：
table.fixed {
position: fixed;
max-width: calc(100% - 300px);
}
更新： 正如评论中提到的 position: sticky 即将到来。 Google Chrome 56+ supports it for th elements and other modern browsers already started to go in this direction。你说它在 Chrome 上对你不起作用 63. 你是否正确设置了阈值？仅设置 position: sticky 是不够的：
body,
html {
height: 100%;
min-height: 100%;
margin: 0;
}
.container {
height: 100%;
min-height: 100%;
display: flex;
flex-direction: column;
}
header {
z-index: 0;
flex: 0 64px;
display: flex;
background: #f4991a;
}
main {
flex: 1;
display: flex;
background: #f9f5f0;
overflow: auto;
}
aside {
background: #f2ead3;
flex: 0 0 300px;
overflow: auto;
order: 0;
border-right: 1px solid #d9d9d9;
display: flex;
flex-direction: column;
}
section {
background: #f3f3f5;
flex: 1 1 100px;
order: 1;
overflow: auto;
}
table {
text-align: left;
width: 100%;
background-color: white;
border-collapse: collapse;
}
th {
position: sticky;
top: 0;
background-color: #fff;
}
td, th {
padding: 5px;
}
<div class="container">
<header>
Fixed Header
</header>
<main>
<aside>
Fixed Sidebar
</aside>
<section>
<table>
<thead>
<tr>
<th>Fixed TH 1</th>
<th>Fixed TH 2</th>
<th>Fixed TH 3</th>
</tr>
</thead>
<tbody>
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
</tr>
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
</tr>
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
</tr>
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
</tr>
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
</tr>
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
</tr>
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
</tr>
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
</tr>
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
</tr>
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
</tr>
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
</tr>
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
</tr>
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
</tr>
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
</tr>
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
</tr>
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
</tr>
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
</tr>
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
</tr>
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
</tr>
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
</tr>
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
</tr>
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
</tr>
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
</tr>
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
</tr>
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
</tr>
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
</tr>
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
</tr>
</tbody>
</table>
</section>
</main>
</div>
我建议使用嵌套的flexbox布局，不需要固定位置。
在第二个 table 周围添加了一个 div 容器。即使内容长度不同，也要为等宽单元格设置 table-layout: fixed;。
<section>
<table>
...
</table>
<div class="scroll-area">
<table>
...
</table>
</div>
</section>
section {
display: flex;
flex-direction: column;
}
table {
table-layout: fixed;
width: 100%;
}
.scroll-area {
flex: 1;
overflow: auto;
}
body,
html {
height: 100%;
min-height: 100%;
margin: 0;
}
.container {
height: 100%;
min-height: 100%;
display: flex;
flex-direction: column;
}
header {
z-index: 0;
flex: 0 64px;
display: flex;
background: #f4991a;
}
main {
flex: 1;
display: flex;
background: #f9f5f0;
overflow: auto;
}
aside {
background: #f2ead3;
flex: 0 0 300px;
overflow: auto;
order: 0;
border-right: 1px solid #d9d9d9;
display: flex;
flex-direction: column;
}
section {
background: #f3f3f5;
flex: 1 1 100px;
}
section {
display: flex;
flex-direction: column;
}
table {
text-align: left;
table-layout: fixed;
width: 100%;
padding: 10px;
background-color: white;
}
.scroll-area {
flex: 1;
overflow: auto;
}
<div class="container">
<header>
Fixed Header
</header>
<main>
<aside>
Fixed Sidebar
</aside>
<section>
<table>
<thead>
<tr>
<th>Fixed TH 1</th>
<th>Fixed TH 2</th>
<th>Fixed TH 3</th>
</tr>
</thead>
</table>
<div class="scroll-area">
<table>
<tbody>
<tr><td>1 first cell</td><td>2</td><td>3</td></tr>
<tr><td>1</td><td>2</td><td>3</td></tr>
<tr><td>1</td><td>2</td><td>3</td></tr>
<tr><td>1</td><td>2</td><td>3</td></tr>
<tr><td>1</td><td>2</td><td>3</td></tr>
<tr><td>1</td><td>2</td><td>3</td></tr>
<tr><td>1</td><td>2</td><td>3</td></tr>
<tr><td>1</td><td>2</td><td>3</td></tr>
<tr><td>1</td><td>2</td><td>3</td></tr>
<tr><td>1</td><td>2</td><td>3</td></tr>
<tr><td>1</td><td>2</td><td>3</td></tr>
<tr><td>1</td><td>2</td><td>3</td></tr>
<tr><td>1</td><td>2</td><td>3</td></tr>
<tr><td>1</td><td>2</td><td>3</td></tr>
<tr><td>1</td><td>2</td><td>3</td></tr>
<tr><td>1</td><td>2</td><td>3</td></tr>
<tr><td>1</td><td>2</td><td>3</td></tr>
<tr><td>1</td><td>2</td><td>3</td></tr>
<tr><td>1</td><td>2</td><td>3</td></tr>
<tr><td>1</td><td>2</td><td>3</td></tr>
<tr><td>1</td><td>2</td><td>3</td></tr>
<tr><td>1</td><td>2</td><td>3</td></tr>
<tr><td>1</td><td>2</td><td>3</td></tr>
<tr><td>1</td><td>2</td><td>3</td></tr>
<tr><td>1</td><td>2</td><td>3</td></tr>
<tr><td>1</td><td>2</td><td>3</td></tr>
<tr><td>1</td><td>2</td><td>3</td></tr>
</tbody>
</table>
</div>
</section>
</main>
</div>