带有水平滚动和粘性标题的大表

Question

我要做什么

我想使用thead th {poistion: sticky; top: 0}。但是doesn't work 和overflow: scroll。我的表格内容很宽，所以我确实需要某种滚动。相反，我删除了overflow: scroll 并计划使用本机窗口滚动。

问题

这很好用，而且标题实际上很粘。但是，在向右滚动时，页眉和页脚保持左对齐。这是有道理的，因为我希望它能做到这一点。但是当有人水平滚动时，它会让我的页面看起来很丑。

这是一个例子

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>

我想要什么

如您所见，标题保持在原来的位置。我想做的是至少让页眉和页脚的背景一直向右延伸。我不介意内容是否仍在左侧，但背景设置为白色，这真的很难看。

有没有办法用 CSS Grid 做到这一点？

Answer 1

我想做的至少是让页眉和页脚的背景一直向右延伸。

您只需将display: grid 声明应用于body 元素即可。

body 元素的子元素没有空间水平共享空间，因此这些元素将自动流入一列，它们都共享相同的宽度。

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>