我有一个带有固定顶部标题，固定左侧边栏和可滚动右侧内容区域的布局。内容包括一个长表，我想在粘性标题下滚动。
我已经为标题创建了一个单独的表，在我添加任何固定位置样式之前，所有内容都很好。当我把位置固定时，标题会突出但是它会从屏幕上伸出（可能是由于侧边栏的偏移？）有没有办法让它像桌子一样延伸到屏幕的整个宽度？这是小提琴，我对引起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>
我建议使用嵌套的flexbox布局，不需要固定位置。
在第二个表周围添加了一个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>实际上，一切都按预期工作，因为根据文档，固定元素相对于浏览器窗口定位，并且表格的标题宽度等于窗口的宽度。如果您的侧边栏总是具有固定的宽度（例如300px），您可以设置表头的限制，如下所示：
table.fixed {
position: fixed;
max-width: calc(100% - 300px);
}
更新：正如评论中提到的那样，position: sticky即将到来。 Google Chrome 56+支持th元素和其他现代浏览器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>