大 table 水平滚动和粘性 header
A large table with horizontal scroll and sticky header
我想做什么
我想使用 thead th {poistion: sticky; top: 0}。但是 doesn't work 和 overflow: scroll。我的 table 内容非常广泛，因此我确实需要某种滚动方式。相反，我删除了 overflow: scroll 并计划使用原生的 window 卷轴。
问题
效果很好，header 实际上很粘。但是，向右滚动时，header 和页脚保持左对齐。这是有道理的，因为我希望它能做到这一点。但是当有人水平滚动时，它会让我的页面看起来非常难看。
举个例子
header {
background: red;
padding: 20px;
}
footer {
background: blue;
padding: 20px;
}
table th {
position: sticky;
top: 0;
}
<header>
<nav>Navigation and Header</nav>
</header>
<main>
<table>
<tr>
<th>Firstname</th>
<th>Lastname</th>
<th>Age</th>
<th>Firstname</th>
<th>Lastname</th>
<th>Age</th>
<th>Firstname</th>
<th>Lastname</th>
<th>Age</th>
<th>Firstname</th>
<th>Lastname</th>
<th>Age</th>
<th>Firstname</th>
<th>Lastname</th>
<th>Age</th>
<th>Firstname</th>
<th>Lastname</th>
<th>Age</th>
<th>Firstname</th>
<th>Lastname</th>
<th>Age</th>
<th>Firstname</th>
<th>Lastname</th>
<th>Age</th>
<th>Firstname</th>
<th>Lastname</th>
<th>Age</th>
<th>Firstname</th>
<th>Lastname</th>
<th>Age</th>
</tr>
<tr>
<td>Jill</td>
<td>Smith</td>
<td>50</td>
<td>Jill</td>
<td>Smith</td>
<td>50</td>
<td>Jill</td>
<td>Smith</td>
<td>50</td>
<td>Jill</td>
<td>Smith</td>
<td>50</td>
<td>Jill</td>
<td>Smith</td>
<td>50</td>
<td>Jill</td>
<td>Smith</td>
<td>50</td>
<td>Jill</td>
<td>Smith</td>
<td>50</td>
<td>Jill</td>
<td>Smith</td>
<td>50</td>
<td>Jill</td>
<td>Smith</td>
<td>50</td>
<td>Jill</td>
<td>Smith</td>
<td>50</td>
</tr>
<tr>
<td>Jill</td>
<td>Smith</td>
<td>50</td>
<td>Jill</td>
<td>Smith</td>
<td>50</td>
<td>Jill</td>
<td>Smith</td>
<td>50</td>
<td>Jill</td>
<td>Smith</td>
<td>50</td>
<td>Jill</td>
<td>Smith</td>
<td>50</td>
<td>Jill</td>
<td>Smith</td>
<td>50</td>
<td>Jill</td>
<td>Smith</td>
<td>50</td>
<td>Jill</td>
<td>Smith</td>
<td>50</td>
<td>Jill</td>
<td>Smith</td>
<td>50</td>
<td>Jill</td>
<td>Smith</td>
<td>50</td>
</tr>
<tr>
<td>Jill</td>
<td>Smith</td>
<td>50</td>
<td>Jill</td>
<td>Smith</td>
<td>50</td>
<td>Jill</td>
<td>Smith</td>
<td>50</td>
<td>Jill</td>
<td>Smith</td>
<td>50</td>
<td>Jill</td>
<td>Smith</td>
<td>50</td>
<td>Jill</td>
<td>Smith</td>
<td>50</td>
<td>Jill</td>
<td>Smith</td>
<td>50</td>
<td>Jill</td>
<td>Smith</td>
<td>50</td>
<td>Jill</td>
<td>Smith</td>
<td>50</td>
<td>Jill</td>
<td>Smith</td>
<td>50</td>
</tr>
<tr>
<td>Jill</td>
<td>Smith</td>
<td>50</td>
<td>Jill</td>
<td>Smith</td>
<td>50</td>
<td>Jill</td>
<td>Smith</td>
<td>50</td>
<td>Jill</td>
<td>Smith</td>
<td>50</td>
<td>Jill</td>
<td>Smith</td>
<td>50</td>
<td>Jill</td>
<td>Smith</td>
<td>50</td>
<td>Jill</td>
<td>Smith</td>
<td>50</td>
<td>Jill</td>
<td>Smith</td>
<td>50</td>
<td>Jill</td>
<td>Smith</td>
<td>50</td>
<td>Jill</td>
<td>Smith</td>
<td>50</td>
</tr>
<tr>
<td>Jill</td>
<td>Smith</td>
<td>50</td>
<td>Jill</td>
<td>Smith</td>
<td>50</td>
<td>Jill</td>
<td>Smith</td>
<td>50</td>
<td>Jill</td>
<td>Smith</td>
<td>50</td>
<td>Jill</td>
<td>Smith</td>
<td>50</td>
<td>Jill</td>
<td>Smith</td>
<td>50</td>
<td>Jill</td>
<td>Smith</td>
<td>50</td>
<td>Jill</td>
<td>Smith</td>
<td>50</td>
<td>Jill</td>
<td>Smith</td>
<td>50</td>
<td>Jill</td>
<td>Smith</td>
<td>50</td>
</tr>
<tr>
<td>Jill</td>
<td>Smith</td>
<td>50</td>
<td>Jill</td>
<td>Smith</td>
<td>50</td>
<td>Jill</td>
<td>Smith</td>
<td>50</td>
<td>Jill</td>
<td>Smith</td>
<td>50</td>
<td>Jill</td>
<td>Smith</td>
<td>50</td>
<td>Jill</td>
<td>Smith</td>
<td>50</td>
<td>Jill</td>
<td>Smith</td>
<td>50</td>
<td>Jill</td>
<td>Smith</td>
<td>50</td>
<td>Jill</td>
<td>Smith</td>
<td>50</td>
<td>Jill</td>
<td>Smith</td>
<td>50</td>
</tr>
<tr>
<td>Jill</td>
<td>Smith</td>
<td>50</td>
<td>Jill</td>
<td>Smith</td>
<td>50</td>
<td>Jill</td>
<td>Smith</td>
<td>50</td>
<td>Jill</td>
<td>Smith</td>
<td>50</td>
<td>Jill</td>
<td>Smith</td>
<td>50</td>
<td>Jill</td>
<td>Smith</td>
<td>50</td>
<td>Jill</td>
<td>Smith</td>
<td>50</td>
<td>Jill</td>
<td>Smith</td>
<td>50</td>
<td>Jill</td>
<td>Smith</td>
<td>50</td>
<td>Jill</td>
<td>Smith</td>
<td>50</td>
</tr>
<tr>
<td>Jill</td>
<td>Smith</td>
<td>50</td>
<td>Jill</td>
<td>Smith</td>
<td>50</td>
<td>Jill</td>
<td>Smith</td>
<td>50</td>
<td>Jill</td>
<td>Smith</td>
<td>50</td>
<td>Jill</td>
<td>Smith</td>
<td>50</td>
<td>Jill</td>
<td>Smith</td>
<td>50</td>
<td>Jill</td>
<td>Smith</td>
<td>50</td>
<td>Jill</td>
<td>Smith</td>
<td>50</td>
<td>Jill</td>
<td>Smith</td>
<td>50</td>
<td>Jill</td>
<td>Smith</td>
<td>50</td>
</tr>
<tr>
<td>Jill</td>
<td>Smith</td>
<td>50</td>
<td>Jill</td>
<td>Smith</td>
<td>50</td>
<td>Jill</td>
<td>Smith</td>
<td>50</td>
<td>Jill</td>
<td>Smith</td>
<td>50</td>
<td>Jill</td>
<td>Smith</td>
<td>50</td>
<td>Jill</td>
<td>Smith</td>
<td>50</td>
<td>Jill</td>
<td>Smith</td>
<td>50</td>
<td>Jill</td>
<td>Smith</td>
<td>50</td>
<td>Jill</td>
<td>Smith</td>
<td>50</td>
<td>Jill</td>
<td>Smith</td>
<td>50</td>
</tr>
<tr>
<td>Jill</td>
<td>Smith</td>
<td>50</td>
<td>Jill</td>
<td>Smith</td>
<td>50</td>
<td>Jill</td>
<td>Smith</td>
<td>50</td>
<td>Jill</td>
<td>Smith</td>
<td>50</td>
<td>Jill</td>
<td>Smith</td>
<td>50</td>
<td>Jill</td>
<td>Smith</td>
<td>50</td>
<td>Jill</td>
<td>Smith</td>
<td>50</td>
<td>Jill</td>
<td>Smith</td>
<td>50</td>
<td>Jill</td>
<td>Smith</td>
<td>50</td>
<td>Jill</td>
<td>Smith</td>
<td>50</td>
</tr>
<tr>
<td>Jill</td>
<td>Smith</td>
<td>50</td>
<td>Jill</td>
<td>Smith</td>
<td>50</td>
<td>Jill</td>
<td>Smith</td>
<td>50</td>
<td>Jill</td>
<td>Smith</td>
<td>50</td>
<td>Jill</td>
<td>Smith</td>
<td>50</td>
<td>Jill</td>
<td>Smith</td>
<td>50</td>
<td>Jill</td>
<td>Smith</td>
<td>50</td>
<td>Jill</td>
<td>Smith</td>
<td>50</td>
<td>Jill</td>
<td>Smith</td>
<td>50</td>
<td>Jill</td>
<td>Smith</td>
<td>50</td>
</tr>
<tr>
<td>Jill</td>
<td>Smith</td>
<td>50</td>
<td>Jill</td>
<td>Smith</td>
<td>50</td>
<td>Jill</td>
<td>Smith</td>
<td>50</td>
<td>Jill</td>
<td>Smith</td>
<td>50</td>
<td>Jill</td>
<td>Smith</td>
<td>50</td>
<td>Jill</td>
<td>Smith</td>
<td>50</td>
<td>Jill</td>
<td>Smith</td>
<td>50</td>
<td>Jill</td>
<td>Smith</td>
<td>50</td>
<td>Jill</td>
<td>Smith</td>
<td>50</td>
<td>Jill</td>
<td>Smith</td>
<td>50</td>
</tr>
<tr>
<td>Jill</td>
<td>Smith</td>
<td>50</td>
<td>Jill</td>
<td>Smith</td>
<td>50</td>
<td>Jill</td>
<td>Smith</td>
<td>50</td>
<td>Jill</td>
<td>Smith</td>
<td>50</td>
<td>Jill</td>
<td>Smith</td>
<td>50</td>
<td>Jill</td>
<td>Smith</td>
<td>50</td>
<td>Jill</td>
<td>Smith</td>
<td>50</td>
<td>Jill</td>
<td>Smith</td>
<td>50</td>
<td>Jill</td>
<td>Smith</td>
<td>50</td>
<td>Jill</td>
<td>Smith</td>
<td>50</td>
</tr>
<tr>
<td>Jill</td>
<td>Smith</td>
<td>50</td>
<td>Jill</td>
<td>Smith</td>
<td>50</td>
<td>Jill</td>
<td>Smith</td>
<td>50</td>
<td>Jill</td>
<td>Smith</td>
<td>50</td>
<td>Jill</td>
<td>Smith</td>
<td>50</td>
<td>Jill</td>
<td>Smith</td>
<td>50</td>
<td>Jill</td>
<td>Smith</td>
<td>50</td>
<td>Jill</td>
<td>Smith</td>
<td>50</td>
<td>Jill</td>
<td>Smith</td>
<td>50</td>
<td>Jill</td>
<td>Smith</td>
<td>50</td>
</tr>
<tr>
<td>Jill</td>
<td>Smith</td>
<td>50</td>
<td>Jill</td>
<td>Smith</td>
<td>50</td>
<td>Jill</td>
<td>Smith</td>
<td>50</td>
<td>Jill</td>
<td>Smith</td>
<td>50</td>
<td>Jill</td>
<td>Smith</td>
<td>50</td>
<td>Jill</td>
<td>Smith</td>
<td>50</td>
<td>Jill</td>
<td>Smith</td>
<td>50</td>
<td>Jill</td>
<td>Smith</td>
<td>50</td>
<td>Jill</td>
<td>Smith</td>
<td>50</td>
<td>Jill</td>
<td>Smith</td>
<td>50</td>
</tr>
<tr>
<td>Jill</td>
<td>Smith</td>
<td>50</td>
<td>Jill</td>
<td>Smith</td>
<td>50</td>
<td>Jill</td>
<td>Smith</td>
<td>50</td>
<td>Jill</td>
<td>Smith</td>
<td>50</td>
<td>Jill</td>
<td>Smith</td>
<td>50</td>
<td>Jill</td>
<td>Smith</td>
<td>50</td>
<td>Jill</td>
<td>Smith</td>
<td>50</td>
<td>Jill</td>
<td>Smith</td>
<td>50</td>
<td>Jill</td>
<td>Smith</td>
<td>50</td>
<td>Jill</td>
<td>Smith</td>
<td>50</td>
</tr>
<tr>
<td>Jill</td>
<td>Smith</td>
<td>50</td>
<td>Jill</td>
<td>Smith</td>
<td>50</td>
<td>Jill</td>
<td>Smith</td>
<td>50</td>
<td>Jill</td>
<td>Smith</td>
<td>50</td>
<td>Jill</td>
<td>Smith</td>
<td>50</td>
<td>Jill</td>
<td>Smith</td>
<td>50</td>
<td>Jill</td>
<td>Smith</td>
<td>50</td>
<td>Jill</td>
<td>Smith</td>
<td>50</td>
<td>Jill</td>
<td>Smith</td>
<td>50</td>
<td>Jill</td>
<td>Smith</td>
<td>50</td>
</tr>
</table>
</main>
<footer>
Footer
</footer>
我想要的
如您所见，header 保持原样。我想做的是至少让 header 的背景和页脚一直延伸到右边。我不介意内容是否仍在左侧，但背景设置为白色，这真的很难看。
有没有办法用 CSS 网格做到这一点？
What I would like to do is at least have the background of header and footer extend all the way to the right.
您只需将 display: grid 声明应用于 body 元素即可。
body 元素的子元素没有空间在水平方向共享 space，因此这些元素将自动流入一列，其中它们都共享相同的宽度。
body {
display: grid;
}
header {
background: red;
padding: 20px;
}
footer {
background: blue;
padding: 20px;
}
table th {
position: sticky;
top: 0;
}
<header>
<nav>Navigation and Header</nav>
</header>
<main>
<table>
<tr>
<th>Firstname</th>
<th>Lastname</th>
<th>Age</th>
<th>Firstname</th>
<th>Lastname</th>
<th>Age</th>
<th>Firstname</th>
<th>Lastname</th>
<th>Age</th>
<th>Firstname</th>
<th>Lastname</th>
<th>Age</th>
<th>Firstname</th>
<th>Lastname</th>
<th>Age</th>
<th>Firstname</th>
<th>Lastname</th>
<th>Age</th>
<th>Firstname</th>
<th>Lastname</th>
<th>Age</th>
<th>Firstname</th>
<th>Lastname</th>
<th>Age</th>
<th>Firstname</th>
<th>Lastname</th>
<th>Age</th>
<th>Firstname</th>
<th>Lastname</th>
<th>Age</th>
</tr>
<tr>
<td>Jill</td>
<td>Smith</td>
<td>50</td>
<td>Jill</td>
<td>Smith</td>
<td>50</td>
<td>Jill</td>
<td>Smith</td>
<td>50</td>
<td>Jill</td>
<td>Smith</td>
<td>50</td>
<td>Jill</td>
<td>Smith</td>
<td>50</td>
<td>Jill</td>
<td>Smith</td>
<td>50</td>
<td>Jill</td>
<td>Smith</td>
<td>50</td>
<td>Jill</td>
<td>Smith</td>
<td>50</td>
<td>Jill</td>
<td>Smith</td>
<td>50</td>
<td>Jill</td>
<td>Smith</td>
<td>50</td>
</tr>
<tr>
<td>Jill</td>
<td>Smith</td>
<td>50</td>
<td>Jill</td>
<td>Smith</td>
<td>50</td>
<td>Jill</td>
<td>Smith</td>
<td>50</td>
<td>Jill</td>
<td>Smith</td>
<td>50</td>
<td>Jill</td>
<td>Smith</td>
<td>50</td>
<td>Jill</td>
<td>Smith</td>
<td>50</td>
<td>Jill</td>
<td>Smith</td>
<td>50</td>
<td>Jill</td>
<td>Smith</td>
<td>50</td>
<td>Jill</td>
<td>Smith</td>
<td>50</td>
<td>Jill</td>
<td>Smith</td>
<td>50</td>
</tr>
<tr>
<td>Jill</td>
<td>Smith</td>
<td>50</td>
<td>Jill</td>
<td>Smith</td>
<td>50</td>
<td>Jill</td>
<td>Smith</td>
<td>50</td>
<td>Jill</td>
<td>Smith</td>
<td>50</td>
<td>Jill</td>
<td>Smith</td>
<td>50</td>
<td>Jill</td>
<td>Smith</td>
<td>50</td>
<td>Jill</td>
<td>Smith</td>
<td>50</td>
<td>Jill</td>
<td>Smith</td>
<td>50</td>
<td>Jill</td>
<td>Smith</td>
<td>50</td>
<td>Jill</td>
<td>Smith</td>
<td>50</td>
</tr>
<tr>
<td>Jill</td>
<td>Smith</td>
<td>50</td>
<td>Jill</td>
<td>Smith</td>
<td>50</td>
<td>Jill</td>
<td>Smith</td>
<td>50</td>
<td>Jill</td>
<td>Smith</td>
<td>50</td>
<td>Jill</td>
<td>Smith</td>
<td>50</td>
<td>Jill</td>
<td>Smith</td>
<td>50</td>
<td>Jill</td>
<td>Smith</td>
<td>50</td>
<td>Jill</td>
<td>Smith</td>
<td>50</td>
<td>Jill</td>
<td>Smith</td>
<td>50</td>
<td>Jill</td>
<td>Smith</td>
<td>50</td>
</tr>
<tr>
<td>Jill</td>
<td>Smith</td>
<td>50</td>
<td>Jill</td>
<td>Smith</td>
<td>50</td>
<td>Jill</td>
<td>Smith</td>
<td>50</td>
<td>Jill</td>
<td>Smith</td>
<td>50</td>
<td>Jill</td>
<td>Smith</td>
<td>50</td>
<td>Jill</td>
<td>Smith</td>
<td>50</td>
<td>Jill</td>
<td>Smith</td>
<td>50</td>
<td>Jill</td>
<td>Smith</td>
<td>50</td>
<td>Jill</td>
<td>Smith</td>
<td>50</td>
<td>Jill</td>
<td>Smith</td>
<td>50</td>
</tr>
<tr>
<td>Jill</td>
<td>Smith</td>
<td>50</td>
<td>Jill</td>
<td>Smith</td>
<td>50</td>
<td>Jill</td>
<td>Smith</td>
<td>50</td>
<td>Jill</td>
<td>Smith</td>
<td>50</td>
<td>Jill</td>
<td>Smith</td>
<td>50</td>
<td>Jill</td>
<td>Smith</td>
<td>50</td>
<td>Jill</td>
<td>Smith</td>
<td>50</td>
<td>Jill</td>
<td>Smith</td>
<td>50</td>
<td>Jill</td>
<td>Smith</td>
<td>50</td>
<td>Jill</td>
<td>Smith</td>
<td>50</td>
</tr>
<tr>
<td>Jill</td>
<td>Smith</td>
<td>50</td>
<td>Jill</td>
<td>Smith</td>
<td>50</td>
<td>Jill</td>
<td>Smith</td>
<td>50</td>
<td>Jill</td>
<td>Smith</td>
<td>50</td>
<td>Jill</td>
<td>Smith</td>
<td>50</td>
<td>Jill</td>
<td>Smith</td>
<td>50</td>
<td>Jill</td>
<td>Smith</td>
<td>50</td>
<td>Jill</td>
<td>Smith</td>
<td>50</td>
<td>Jill</td>
<td>Smith</td>
<td>50</td>
<td>Jill</td>
<td>Smith</td>
<td>50</td>
</tr>
<tr>
<td>Jill</td>
<td>Smith</td>
<td>50</td>
<td>Jill</td>
<td>Smith</td>
<td>50</td>
<td>Jill</td>
<td>Smith</td>
<td>50</td>
<td>Jill</td>
<td>Smith</td>
<td>50</td>
<td>Jill</td>
<td>Smith</td>
<td>50</td>
<td>Jill</td>
<td>Smith</td>
<td>50</td>
<td>Jill</td>
<td>Smith</td>
<td>50</td>
<td>Jill</td>
<td>Smith</td>
<td>50</td>
<td>Jill</td>
<td>Smith</td>
<td>50</td>
<td>Jill</td>
<td>Smith</td>
<td>50</td>
</tr>
<tr>
<td>Jill</td>
<td>Smith</td>
<td>50</td>
<td>Jill</td>
<td>Smith</td>
<td>50</td>
<td>Jill</td>
<td>Smith</td>
<td>50</td>
<td>Jill</td>
<td>Smith</td>
<td>50</td>
<td>Jill</td>
<td>Smith</td>
<td>50</td>
<td>Jill</td>
<td>Smith</td>
<td>50</td>
<td>Jill</td>
<td>Smith</td>
<td>50</td>
<td>Jill</td>
<td>Smith</td>
<td>50</td>
<td>Jill</td>
<td>Smith</td>
<td>50</td>
<td>Jill</td>
<td>Smith</td>
<td>50</td>
</tr>
<tr>
<td>Jill</td>
<td>Smith</td>
<td>50</td>
<td>Jill</td>
<td>Smith</td>
<td>50</td>
<td>Jill</td>
<td>Smith</td>
<td>50</td>
<td>Jill</td>
<td>Smith</td>
<td>50</td>
<td>Jill</td>
<td>Smith</td>
<td>50</td>
<td>Jill</td>
<td>Smith</td>
<td>50</td>
<td>Jill</td>
<td>Smith</td>
<td>50</td>
<td>Jill</td>
<td>Smith</td>
<td>50</td>
<td>Jill</td>
<td>Smith</td>
<td>50</td>
<td>Jill</td>
<td>Smith</td>
<td>50</td>
</tr>
<tr>
<td>Jill</td>
<td>Smith</td>
<td>50</td>
<td>Jill</td>
<td>Smith</td>
<td>50</td>
<td>Jill</td>
<td>Smith</td>
<td>50</td>
<td>Jill</td>
<td>Smith</td>
<td>50</td>
<td>Jill</td>
<td>Smith</td>
<td>50</td>
<td>Jill</td>
<td>Smith</td>
<td>50</td>
<td>Jill</td>
<td>Smith</td>
<td>50</td>
<td>Jill</td>
<td>Smith</td>
<td>50</td>
<td>Jill</td>
<td>Smith</td>
<td>50</td>
<td>Jill</td>
<td>Smith</td>
<td>50</td>
</tr>
<tr>
<td>Jill</td>
<td>Smith</td>
<td>50</td>
<td>Jill</td>
<td>Smith</td>
<td>50</td>
<td>Jill</td>
<td>Smith</td>
<td>50</td>
<td>Jill</td>
<td>Smith</td>
<td>50</td>
<td>Jill</td>
<td>Smith</td>
<td>50</td>
<td>Jill</td>
<td>Smith</td>
<td>50</td>
<td>Jill</td>
<td>Smith</td>
<td>50</td>
<td>Jill</td>
<td>Smith</td>
<td>50</td>
<td>Jill</td>
<td>Smith</td>
<td>50</td>
<td>Jill</td>
<td>Smith</td>
<td>50</td>
</tr>
<tr>
<td>Jill</td>
<td>Smith</td>
<td>50</td>
<td>Jill</td>
<td>Smith</td>
<td>50</td>
<td>Jill</td>
<td>Smith</td>
<td>50</td>
<td>Jill</td>
<td>Smith</td>
<td>50</td>
<td>Jill</td>
<td>Smith</td>
<td>50</td>
<td>Jill</td>
<td>Smith</td>
<td>50</td>
<td>Jill</td>
<td>Smith</td>
<td>50</td>
<td>Jill</td>
<td>Smith</td>
<td>50</td>
<td>Jill</td>
<td>Smith</td>
<td>50</td>
<td>Jill</td>
<td>Smith</td>
<td>50</td>
</tr>
<tr>
<td>Jill</td>
<td>Smith</td>
<td>50</td>
<td>Jill</td>
<td>Smith</td>
<td>50</td>
<td>Jill</td>
<td>Smith</td>
<td>50</td>
<td>Jill</td>
<td>Smith</td>
<td>50</td>
<td>Jill</td>
<td>Smith</td>
<td>50</td>
<td>Jill</td>
<td>Smith</td>
<td>50</td>
<td>Jill</td>
<td>Smith</td>
<td>50</td>
<td>Jill</td>
<td>Smith</td>
<td>50</td>
<td>Jill</td>
<td>Smith</td>
<td>50</td>
<td>Jill</td>
<td>Smith</td>
<td>50</td>
</tr>
<tr>
<td>Jill</td>
<td>Smith</td>
<td>50</td>
<td>Jill</td>
<td>Smith</td>
<td>50</td>
<td>Jill</td>
<td>Smith</td>
<td>50</td>
<td>Jill</td>
<td>Smith</td>
<td>50</td>
<td>Jill</td>
<td>Smith</td>
<td>50</td>
<td>Jill</td>
<td>Smith</td>
<td>50</td>
<td>Jill</td>
<td>Smith</td>
<td>50</td>
<td>Jill</td>
<td>Smith</td>
<td>50</td>
<td>Jill</td>
<td>Smith</td>
<td>50</td>
<td>Jill</td>
<td>Smith</td>
<td>50</td>
</tr>
<tr>
<td>Jill</td>
<td>Smith</td>
<td>50</td>
<td>Jill</td>
<td>Smith</td>
<td>50</td>
<td>Jill</td>
<td>Smith</td>
<td>50</td>
<td>Jill</td>
<td>Smith</td>
<td>50</td>
<td>Jill</td>
<td>Smith</td>
<td>50</td>
<td>Jill</td>
<td>Smith</td>
<td>50</td>
<td>Jill</td>
<td>Smith</td>
<td>50</td>
<td>Jill</td>
<td>Smith</td>
<td>50</td>
<td>Jill</td>
<td>Smith</td>
<td>50</td>
<td>Jill</td>
<td>Smith</td>
<td>50</td>
</tr>
<tr>
<td>Jill</td>
<td>Smith</td>
<td>50</td>
<td>Jill</td>
<td>Smith</td>
<td>50</td>
<td>Jill</td>
<td>Smith</td>
<td>50</td>
<td>Jill</td>
<td>Smith</td>
<td>50</td>
<td>Jill</td>
<td>Smith</td>
<td>50</td>
<td>Jill</td>
<td>Smith</td>
<td>50</td>
<td>Jill</td>
<td>Smith</td>
<td>50</td>
<td>Jill</td>
<td>Smith</td>
<td>50</td>
<td>Jill</td>
<td>Smith</td>
<td>50</td>
<td>Jill</td>
<td>Smith</td>
<td>50</td>
</tr>
</table>
</main>
<footer>
Footer
</footer>
我想做什么
我想使用 thead th {poistion: sticky; top: 0}。但是 doesn't work 和 overflow: scroll。我的 table 内容非常广泛，因此我确实需要某种滚动方式。相反，我删除了 overflow: scroll 并计划使用原生的 window 卷轴。
问题
效果很好，header 实际上很粘。但是，向右滚动时，header 和页脚保持左对齐。这是有道理的，因为我希望它能做到这一点。但是当有人水平滚动时，它会让我的页面看起来非常难看。
举个例子
header {
background: red;
padding: 20px;
}
footer {
background: blue;
padding: 20px;
}
table th {
position: sticky;
top: 0;
}
<header>
<nav>Navigation and Header</nav>
</header>
<main>
<table>
<tr>
<th>Firstname</th>
<th>Lastname</th>
<th>Age</th>
<th>Firstname</th>
<th>Lastname</th>
<th>Age</th>
<th>Firstname</th>
<th>Lastname</th>
<th>Age</th>
<th>Firstname</th>
<th>Lastname</th>
<th>Age</th>
<th>Firstname</th>
<th>Lastname</th>
<th>Age</th>
<th>Firstname</th>
<th>Lastname</th>
<th>Age</th>
<th>Firstname</th>
<th>Lastname</th>
<th>Age</th>
<th>Firstname</th>
<th>Lastname</th>
<th>Age</th>
<th>Firstname</th>
<th>Lastname</th>
<th>Age</th>
<th>Firstname</th>
<th>Lastname</th>
<th>Age</th>
</tr>
<tr>
<td>Jill</td>
<td>Smith</td>
<td>50</td>
<td>Jill</td>
<td>Smith</td>
<td>50</td>
<td>Jill</td>
<td>Smith</td>
<td>50</td>
<td>Jill</td>
<td>Smith</td>
<td>50</td>
<td>Jill</td>
<td>Smith</td>
<td>50</td>
<td>Jill</td>
<td>Smith</td>
<td>50</td>
<td>Jill</td>
<td>Smith</td>
<td>50</td>
<td>Jill</td>
<td>Smith</td>
<td>50</td>
<td>Jill</td>
<td>Smith</td>
<td>50</td>
<td>Jill</td>
<td>Smith</td>
<td>50</td>
</tr>
<tr>
<td>Jill</td>
<td>Smith</td>
<td>50</td>
<td>Jill</td>
<td>Smith</td>
<td>50</td>
<td>Jill</td>
<td>Smith</td>
<td>50</td>
<td>Jill</td>
<td>Smith</td>
<td>50</td>
<td>Jill</td>
<td>Smith</td>
<td>50</td>
<td>Jill</td>
<td>Smith</td>
<td>50</td>
<td>Jill</td>
<td>Smith</td>
<td>50</td>
<td>Jill</td>
<td>Smith</td>
<td>50</td>
<td>Jill</td>
<td>Smith</td>
<td>50</td>
<td>Jill</td>
<td>Smith</td>
<td>50</td>
</tr>
<tr>
<td>Jill</td>
<td>Smith</td>
<td>50</td>
<td>Jill</td>
<td>Smith</td>
<td>50</td>
<td>Jill</td>
<td>Smith</td>
<td>50</td>
<td>Jill</td>
<td>Smith</td>
<td>50</td>
<td>Jill</td>
<td>Smith</td>
<td>50</td>
<td>Jill</td>
<td>Smith</td>
<td>50</td>
<td>Jill</td>
<td>Smith</td>
<td>50</td>
<td>Jill</td>
<td>Smith</td>
<td>50</td>
<td>Jill</td>
<td>Smith</td>
<td>50</td>
<td>Jill</td>
<td>Smith</td>
<td>50</td>
</tr>
<tr>
<td>Jill</td>
<td>Smith</td>
<td>50</td>
<td>Jill</td>
<td>Smith</td>
<td>50</td>
<td>Jill</td>
<td>Smith</td>
<td>50</td>
<td>Jill</td>
<td>Smith</td>
<td>50</td>
<td>Jill</td>
<td>Smith</td>
<td>50</td>
<td>Jill</td>
<td>Smith</td>
<td>50</td>
<td>Jill</td>
<td>Smith</td>
<td>50</td>
<td>Jill</td>
<td>Smith</td>
<td>50</td>
<td>Jill</td>
<td>Smith</td>
<td>50</td>
<td>Jill</td>
<td>Smith</td>
<td>50</td>
</tr>
<tr>
<td>Jill</td>
<td>Smith</td>
<td>50</td>
<td>Jill</td>
<td>Smith</td>
<td>50</td>
<td>Jill</td>
<td>Smith</td>
<td>50</td>
<td>Jill</td>
<td>Smith</td>
<td>50</td>
<td>Jill</td>
<td>Smith</td>
<td>50</td>
<td>Jill</td>
<td>Smith</td>
<td>50</td>
<td>Jill</td>
<td>Smith</td>
<td>50</td>
<td>Jill</td>
<td>Smith</td>
<td>50</td>
<td>Jill</td>
<td>Smith</td>
<td>50</td>
<td>Jill</td>
<td>Smith</td>
<td>50</td>
</tr>
<tr>
<td>Jill</td>
<td>Smith</td>
<td>50</td>
<td>Jill</td>
<td>Smith</td>
<td>50</td>
<td>Jill</td>
<td>Smith</td>
<td>50</td>
<td>Jill</td>
<td>Smith</td>
<td>50</td>
<td>Jill</td>
<td>Smith</td>
<td>50</td>
<td>Jill</td>
<td>Smith</td>
<td>50</td>
<td>Jill</td>
<td>Smith</td>
<td>50</td>
<td>Jill</td>
<td>Smith</td>
<td>50</td>
<td>Jill</td>
<td>Smith</td>
<td>50</td>
<td>Jill</td>
<td>Smith</td>
<td>50</td>
</tr>
<tr>
<td>Jill</td>
<td>Smith</td>
<td>50</td>
<td>Jill</td>
<td>Smith</td>
<td>50</td>
<td>Jill</td>
<td>Smith</td>
<td>50</td>
<td>Jill</td>
<td>Smith</td>
<td>50</td>
<td>Jill</td>
<td>Smith</td>
<td>50</td>
<td>Jill</td>
<td>Smith</td>
<td>50</td>
<td>Jill</td>
<td>Smith</td>
<td>50</td>
<td>Jill</td>
<td>Smith</td>
<td>50</td>
<td>Jill</td>
<td>Smith</td>
<td>50</td>
<td>Jill</td>
<td>Smith</td>
<td>50</td>
</tr>
<tr>
<td>Jill</td>
<td>Smith</td>
<td>50</td>
<td>Jill</td>
<td>Smith</td>
<td>50</td>
<td>Jill</td>
<td>Smith</td>
<td>50</td>
<td>Jill</td>
<td>Smith</td>
<td>50</td>
<td>Jill</td>
<td>Smith</td>
<td>50</td>
<td>Jill</td>
<td>Smith</td>
<td>50</td>
<td>Jill</td>
<td>Smith</td>
<td>50</td>
<td>Jill</td>
<td>Smith</td>
<td>50</td>
<td>Jill</td>
<td>Smith</td>
<td>50</td>
<td>Jill</td>
<td>Smith</td>
<td>50</td>
</tr>
<tr>
<td>Jill</td>
<td>Smith</td>
<td>50</td>
<td>Jill</td>
<td>Smith</td>
<td>50</td>
<td>Jill</td>
<td>Smith</td>
<td>50</td>
<td>Jill</td>
<td>Smith</td>
<td>50</td>
<td>Jill</td>
<td>Smith</td>
<td>50</td>
<td>Jill</td>
<td>Smith</td>
<td>50</td>
<td>Jill</td>
<td>Smith</td>
<td>50</td>
<td>Jill</td>
<td>Smith</td>
<td>50</td>
<td>Jill</td>
<td>Smith</td>
<td>50</td>
<td>Jill</td>
<td>Smith</td>
<td>50</td>
</tr>
<tr>
<td>Jill</td>
<td>Smith</td>
<td>50</td>
<td>Jill</td>
<td>Smith</td>
<td>50</td>
<td>Jill</td>
<td>Smith</td>
<td>50</td>
<td>Jill</td>
<td>Smith</td>
<td>50</td>
<td>Jill</td>
<td>Smith</td>
<td>50</td>
<td>Jill</td>
<td>Smith</td>
<td>50</td>
<td>Jill</td>
<td>Smith</td>
<td>50</td>
<td>Jill</td>
<td>Smith</td>
<td>50</td>
<td>Jill</td>
<td>Smith</td>
<td>50</td>
<td>Jill</td>
<td>Smith</td>
<td>50</td>
</tr>
<tr>
<td>Jill</td>
<td>Smith</td>
<td>50</td>
<td>Jill</td>
<td>Smith</td>
<td>50</td>
<td>Jill</td>
<td>Smith</td>
<td>50</td>
<td>Jill</td>
<td>Smith</td>
<td>50</td>
<td>Jill</td>
<td>Smith</td>
<td>50</td>
<td>Jill</td>
<td>Smith</td>
<td>50</td>
<td>Jill</td>
<td>Smith</td>
<td>50</td>
<td>Jill</td>
<td>Smith</td>
<td>50</td>
<td>Jill</td>
<td>Smith</td>
<td>50</td>
<td>Jill</td>
<td>Smith</td>
<td>50</td>
</tr>
<tr>
<td>Jill</td>
<td>Smith</td>
<td>50</td>
<td>Jill</td>
<td>Smith</td>
<td>50</td>
<td>Jill</td>
<td>Smith</td>
<td>50</td>
<td>Jill</td>
<td>Smith</td>
<td>50</td>
<td>Jill</td>
<td>Smith</td>
<td>50</td>
<td>Jill</td>
<td>Smith</td>
<td>50</td>
<td>Jill</td>
<td>Smith</td>
<td>50</td>
<td>Jill</td>
<td>Smith</td>
<td>50</td>
<td>Jill</td>
<td>Smith</td>
<td>50</td>
<td>Jill</td>
<td>Smith</td>
<td>50</td>
</tr>
<tr>
<td>Jill</td>
<td>Smith</td>
<td>50</td>
<td>Jill</td>
<td>Smith</td>
<td>50</td>
<td>Jill</td>
<td>Smith</td>
<td>50</td>
<td>Jill</td>
<td>Smith</td>
<td>50</td>
<td>Jill</td>
<td>Smith</td>
<td>50</td>
<td>Jill</td>
<td>Smith</td>
<td>50</td>
<td>Jill</td>
<td>Smith</td>
<td>50</td>
<td>Jill</td>
<td>Smith</td>
<td>50</td>
<td>Jill</td>
<td>Smith</td>
<td>50</td>
<td>Jill</td>
<td>Smith</td>
<td>50</td>
</tr>
<tr>
<td>Jill</td>
<td>Smith</td>
<td>50</td>
<td>Jill</td>
<td>Smith</td>
<td>50</td>
<td>Jill</td>
<td>Smith</td>
<td>50</td>
<td>Jill</td>
<td>Smith</td>
<td>50</td>
<td>Jill</td>
<td>Smith</td>
<td>50</td>
<td>Jill</td>
<td>Smith</td>
<td>50</td>
<td>Jill</td>
<td>Smith</td>
<td>50</td>
<td>Jill</td>
<td>Smith</td>
<td>50</td>
<td>Jill</td>
<td>Smith</td>
<td>50</td>
<td>Jill</td>
<td>Smith</td>
<td>50</td>
</tr>
<tr>
<td>Jill</td>
<td>Smith</td>
<td>50</td>
<td>Jill</td>
<td>Smith</td>
<td>50</td>
<td>Jill</td>
<td>Smith</td>
<td>50</td>
<td>Jill</td>
<td>Smith</td>
<td>50</td>
<td>Jill</td>
<td>Smith</td>
<td>50</td>
<td>Jill</td>
<td>Smith</td>
<td>50</td>
<td>Jill</td>
<td>Smith</td>
<td>50</td>
<td>Jill</td>
<td>Smith</td>
<td>50</td>
<td>Jill</td>
<td>Smith</td>
<td>50</td>
<td>Jill</td>
<td>Smith</td>
<td>50</td>
</tr>
<tr>
<td>Jill</td>
<td>Smith</td>
<td>50</td>
<td>Jill</td>
<td>Smith</td>
<td>50</td>
<td>Jill</td>
<td>Smith</td>
<td>50</td>
<td>Jill</td>
<td>Smith</td>
<td>50</td>
<td>Jill</td>
<td>Smith</td>
<td>50</td>
<td>Jill</td>
<td>Smith</td>
<td>50</td>
<td>Jill</td>
<td>Smith</td>
<td>50</td>
<td>Jill</td>
<td>Smith</td>
<td>50</td>
<td>Jill</td>
<td>Smith</td>
<td>50</td>
<td>Jill</td>
<td>Smith</td>
<td>50</td>
</tr>
<tr>
<td>Jill</td>
<td>Smith</td>
<td>50</td>
<td>Jill</td>
<td>Smith</td>
<td>50</td>
<td>Jill</td>
<td>Smith</td>
<td>50</td>
<td>Jill</td>
<td>Smith</td>
<td>50</td>
<td>Jill</td>
<td>Smith</td>
<td>50</td>
<td>Jill</td>
<td>Smith</td>
<td>50</td>
<td>Jill</td>
<td>Smith</td>
<td>50</td>
<td>Jill</td>
<td>Smith</td>
<td>50</td>
<td>Jill</td>
<td>Smith</td>
<td>50</td>
<td>Jill</td>
<td>Smith</td>
<td>50</td>
</tr>
</table>
</main>
<footer>
Footer
</footer>
我想要的
如您所见，header 保持原样。我想做的是至少让 header 的背景和页脚一直延伸到右边。我不介意内容是否仍在左侧，但背景设置为白色，这真的很难看。
有没有办法用 CSS 网格做到这一点？
What I would like to do is at least have the background of header and footer extend all the way to the right.
您只需将 display: grid 声明应用于 body 元素即可。
body 元素的子元素没有空间在水平方向共享 space，因此这些元素将自动流入一列，其中它们都共享相同的宽度。
body {
display: grid;
}
header {
background: red;
padding: 20px;
}
footer {
background: blue;
padding: 20px;
}
table th {
position: sticky;
top: 0;
}
<header>
<nav>Navigation and Header</nav>
</header>
<main>
<table>
<tr>
<th>Firstname</th>
<th>Lastname</th>
<th>Age</th>
<th>Firstname</th>
<th>Lastname</th>
<th>Age</th>
<th>Firstname</th>
<th>Lastname</th>
<th>Age</th>
<th>Firstname</th>
<th>Lastname</th>
<th>Age</th>
<th>Firstname</th>
<th>Lastname</th>
<th>Age</th>
<th>Firstname</th>
<th>Lastname</th>
<th>Age</th>
<th>Firstname</th>
<th>Lastname</th>
<th>Age</th>
<th>Firstname</th>
<th>Lastname</th>
<th>Age</th>
<th>Firstname</th>
<th>Lastname</th>
<th>Age</th>
<th>Firstname</th>
<th>Lastname</th>
<th>Age</th>
</tr>
<tr>
<td>Jill</td>
<td>Smith</td>
<td>50</td>
<td>Jill</td>
<td>Smith</td>
<td>50</td>
<td>Jill</td>
<td>Smith</td>
<td>50</td>
<td>Jill</td>
<td>Smith</td>
<td>50</td>
<td>Jill</td>
<td>Smith</td>
<td>50</td>
<td>Jill</td>
<td>Smith</td>
<td>50</td>
<td>Jill</td>
<td>Smith</td>
<td>50</td>
<td>Jill</td>
<td>Smith</td>
<td>50</td>
<td>Jill</td>
<td>Smith</td>
<td>50</td>
<td>Jill</td>
<td>Smith</td>
<td>50</td>
</tr>
<tr>
<td>Jill</td>
<td>Smith</td>
<td>50</td>
<td>Jill</td>
<td>Smith</td>
<td>50</td>
<td>Jill</td>
<td>Smith</td>
<td>50</td>
<td>Jill</td>
<td>Smith</td>
<td>50</td>
<td>Jill</td>
<td>Smith</td>
<td>50</td>
<td>Jill</td>
<td>Smith</td>
<td>50</td>
<td>Jill</td>
<td>Smith</td>
<td>50</td>
<td>Jill</td>
<td>Smith</td>
<td>50</td>
<td>Jill</td>
<td>Smith</td>
<td>50</td>
<td>Jill</td>
<td>Smith</td>
<td>50</td>
</tr>
<tr>
<td>Jill</td>
<td>Smith</td>
<td>50</td>
<td>Jill</td>
<td>Smith</td>
<td>50</td>
<td>Jill</td>
<td>Smith</td>
<td>50</td>
<td>Jill</td>
<td>Smith</td>
<td>50</td>
<td>Jill</td>
<td>Smith</td>
<td>50</td>
<td>Jill</td>
<td>Smith</td>
<td>50</td>
<td>Jill</td>
<td>Smith</td>
<td>50</td>
<td>Jill</td>
<td>Smith</td>
<td>50</td>
<td>Jill</td>
<td>Smith</td>
<td>50</td>
<td>Jill</td>
<td>Smith</td>
<td>50</td>
</tr>
<tr>
<td>Jill</td>
<td>Smith</td>
<td>50</td>
<td>Jill</td>
<td>Smith</td>
<td>50</td>
<td>Jill</td>
<td>Smith</td>
<td>50</td>
<td>Jill</td>
<td>Smith</td>
<td>50</td>
<td>Jill</td>
<td>Smith</td>
<td>50</td>
<td>Jill</td>
<td>Smith</td>
<td>50</td>
<td>Jill</td>
<td>Smith</td>
<td>50</td>
<td>Jill</td>
<td>Smith</td>
<td>50</td>
<td>Jill</td>
<td>Smith</td>
<td>50</td>
<td>Jill</td>
<td>Smith</td>
<td>50</td>
</tr>
<tr>
<td>Jill</td>
<td>Smith</td>
<td>50</td>
<td>Jill</td>
<td>Smith</td>
<td>50</td>
<td>Jill</td>
<td>Smith</td>
<td>50</td>
<td>Jill</td>
<td>Smith</td>
<td>50</td>
<td>Jill</td>
<td>Smith</td>
<td>50</td>
<td>Jill</td>
<td>Smith</td>
<td>50</td>
<td>Jill</td>
<td>Smith</td>
<td>50</td>
<td>Jill</td>
<td>Smith</td>
<td>50</td>
<td>Jill</td>
<td>Smith</td>
<td>50</td>
<td>Jill</td>
<td>Smith</td>
<td>50</td>
</tr>
<tr>
<td>Jill</td>
<td>Smith</td>
<td>50</td>
<td>Jill</td>
<td>Smith</td>
<td>50</td>
<td>Jill</td>
<td>Smith</td>
<td>50</td>
<td>Jill</td>
<td>Smith</td>
<td>50</td>
<td>Jill</td>
<td>Smith</td>
<td>50</td>
<td>Jill</td>
<td>Smith</td>
<td>50</td>
<td>Jill</td>
<td>Smith</td>
<td>50</td>
<td>Jill</td>
<td>Smith</td>
<td>50</td>
<td>Jill</td>
<td>Smith</td>
<td>50</td>
<td>Jill</td>
<td>Smith</td>
<td>50</td>
</tr>
<tr>
<td>Jill</td>
<td>Smith</td>
<td>50</td>
<td>Jill</td>
<td>Smith</td>
<td>50</td>
<td>Jill</td>
<td>Smith</td>
<td>50</td>
<td>Jill</td>
<td>Smith</td>
<td>50</td>
<td>Jill</td>
<td>Smith</td>
<td>50</td>
<td>Jill</td>
<td>Smith</td>
<td>50</td>
<td>Jill</td>
<td>Smith</td>
<td>50</td>
<td>Jill</td>
<td>Smith</td>
<td>50</td>
<td>Jill</td>
<td>Smith</td>
<td>50</td>
<td>Jill</td>
<td>Smith</td>
<td>50</td>
</tr>
<tr>
<td>Jill</td>
<td>Smith</td>
<td>50</td>
<td>Jill</td>
<td>Smith</td>
<td>50</td>
<td>Jill</td>
<td>Smith</td>
<td>50</td>
<td>Jill</td>
<td>Smith</td>
<td>50</td>
<td>Jill</td>
<td>Smith</td>
<td>50</td>
<td>Jill</td>
<td>Smith</td>
<td>50</td>
<td>Jill</td>
<td>Smith</td>
<td>50</td>
<td>Jill</td>
<td>Smith</td>
<td>50</td>
<td>Jill</td>
<td>Smith</td>
<td>50</td>
<td>Jill</td>
<td>Smith</td>
<td>50</td>
</tr>
<tr>
<td>Jill</td>
<td>Smith</td>
<td>50</td>
<td>Jill</td>
<td>Smith</td>
<td>50</td>
<td>Jill</td>
<td>Smith</td>
<td>50</td>
<td>Jill</td>
<td>Smith</td>
<td>50</td>
<td>Jill</td>
<td>Smith</td>
<td>50</td>
<td>Jill</td>
<td>Smith</td>
<td>50</td>
<td>Jill</td>
<td>Smith</td>
<td>50</td>
<td>Jill</td>
<td>Smith</td>
<td>50</td>
<td>Jill</td>
<td>Smith</td>
<td>50</td>
<td>Jill</td>
<td>Smith</td>
<td>50</td>
</tr>
<tr>
<td>Jill</td>
<td>Smith</td>
<td>50</td>
<td>Jill</td>
<td>Smith</td>
<td>50</td>
<td>Jill</td>
<td>Smith</td>
<td>50</td>
<td>Jill</td>
<td>Smith</td>
<td>50</td>
<td>Jill</td>
<td>Smith</td>
<td>50</td>
<td>Jill</td>
<td>Smith</td>
<td>50</td>
<td>Jill</td>
<td>Smith</td>
<td>50</td>
<td>Jill</td>
<td>Smith</td>
<td>50</td>
<td>Jill</td>
<td>Smith</td>
<td>50</td>
<td>Jill</td>
<td>Smith</td>
<td>50</td>
</tr>
<tr>
<td>Jill</td>
<td>Smith</td>
<td>50</td>
<td>Jill</td>
<td>Smith</td>
<td>50</td>
<td>Jill</td>
<td>Smith</td>
<td>50</td>
<td>Jill</td>
<td>Smith</td>
<td>50</td>
<td>Jill</td>
<td>Smith</td>
<td>50</td>
<td>Jill</td>
<td>Smith</td>
<td>50</td>
<td>Jill</td>
<td>Smith</td>
<td>50</td>
<td>Jill</td>
<td>Smith</td>
<td>50</td>
<td>Jill</td>
<td>Smith</td>
<td>50</td>
<td>Jill</td>
<td>Smith</td>
<td>50</td>
</tr>
<tr>
<td>Jill</td>
<td>Smith</td>
<td>50</td>
<td>Jill</td>
<td>Smith</td>
<td>50</td>
<td>Jill</td>
<td>Smith</td>
<td>50</td>
<td>Jill</td>
<td>Smith</td>
<td>50</td>
<td>Jill</td>
<td>Smith</td>
<td>50</td>
<td>Jill</td>
<td>Smith</td>
<td>50</td>
<td>Jill</td>
<td>Smith</td>
<td>50</td>
<td>Jill</td>
<td>Smith</td>
<td>50</td>
<td>Jill</td>
<td>Smith</td>
<td>50</td>
<td>Jill</td>
<td>Smith</td>
<td>50</td>
</tr>
<tr>
<td>Jill</td>
<td>Smith</td>
<td>50</td>
<td>Jill</td>
<td>Smith</td>
<td>50</td>
<td>Jill</td>
<td>Smith</td>
<td>50</td>
<td>Jill</td>
<td>Smith</td>
<td>50</td>
<td>Jill</td>
<td>Smith</td>
<td>50</td>
<td>Jill</td>
<td>Smith</td>
<td>50</td>
<td>Jill</td>
<td>Smith</td>
<td>50</td>
<td>Jill</td>
<td>Smith</td>
<td>50</td>
<td>Jill</td>
<td>Smith</td>
<td>50</td>
<td>Jill</td>
<td>Smith</td>
<td>50</td>
</tr>
<tr>
<td>Jill</td>
<td>Smith</td>
<td>50</td>
<td>Jill</td>
<td>Smith</td>
<td>50</td>
<td>Jill</td>
<td>Smith</td>
<td>50</td>
<td>Jill</td>
<td>Smith</td>
<td>50</td>
<td>Jill</td>
<td>Smith</td>
<td>50</td>
<td>Jill</td>
<td>Smith</td>
<td>50</td>
<td>Jill</td>
<td>Smith</td>
<td>50</td>
<td>Jill</td>
<td>Smith</td>
<td>50</td>
<td>Jill</td>
<td>Smith</td>
<td>50</td>
<td>Jill</td>
<td>Smith</td>
<td>50</td>
</tr>
<tr>
<td>Jill</td>
<td>Smith</td>
<td>50</td>
<td>Jill</td>
<td>Smith</td>
<td>50</td>
<td>Jill</td>
<td>Smith</td>
<td>50</td>
<td>Jill</td>
<td>Smith</td>
<td>50</td>
<td>Jill</td>
<td>Smith</td>
<td>50</td>
<td>Jill</td>
<td>Smith</td>
<td>50</td>
<td>Jill</td>
<td>Smith</td>
<td>50</td>
<td>Jill</td>
<td>Smith</td>
<td>50</td>
<td>Jill</td>
<td>Smith</td>
<td>50</td>
<td>Jill</td>
<td>Smith</td>
<td>50</td>
</tr>
<tr>
<td>Jill</td>
<td>Smith</td>
<td>50</td>
<td>Jill</td>
<td>Smith</td>
<td>50</td>
<td>Jill</td>
<td>Smith</td>
<td>50</td>
<td>Jill</td>
<td>Smith</td>
<td>50</td>
<td>Jill</td>
<td>Smith</td>
<td>50</td>
<td>Jill</td>
<td>Smith</td>
<td>50</td>
<td>Jill</td>
<td>Smith</td>
<td>50</td>
<td>Jill</td>
<td>Smith</td>
<td>50</td>
<td>Jill</td>
<td>Smith</td>
<td>50</td>
<td>Jill</td>
<td>Smith</td>
<td>50</td>
</tr>
<tr>
<td>Jill</td>
<td>Smith</td>
<td>50</td>
<td>Jill</td>
<td>Smith</td>
<td>50</td>
<td>Jill</td>
<td>Smith</td>
<td>50</td>
<td>Jill</td>
<td>Smith</td>
<td>50</td>
<td>Jill</td>
<td>Smith</td>
<td>50</td>
<td>Jill</td>
<td>Smith</td>
<td>50</td>
<td>Jill</td>
<td>Smith</td>
<td>50</td>
<td>Jill</td>
<td>Smith</td>
<td>50</td>
<td>Jill</td>
<td>Smith</td>
<td>50</td>
<td>Jill</td>
<td>Smith</td>
<td>50</td>
</tr>
</table>
</main>
<footer>
Footer
</footer>