A large table with horizontal scroll and sticky header

Question

What I am trying to do

I want to use thead th {poistion: sticky; top: 0}. But that doesn't work with overflow: scroll. My table content is very wide so I do need some kind of scrolling. Instead, I have removed the overflow: scroll and plan to use the native window scroll.

Problem

This works great and the header is actually sticky. However, upon scrolling right, header and footer remain left aligned. This makes sense as I would expect it to do this. But it makes my page look really ugly when someone scrolls horizontally.

Here is an example

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>

What I want instead

As you can see, the header stays where it is. What I would like to do is at least have the background of header and footer extend all the way to the right. I don't mind if the content is still on the left but the background is set to white which is really ugly.

Is there a way to do this with CSS Grid?

score 2 · Accepted Answer · edited Apr 12 '18 at 09:40

What I would like to do is at least have the background of header and footer extend all the way to the right.

You can do this by simply applying a display: grid declaration to the body element.

There's no room for the body element's child elements to share space horizontally, so those elements will be automatically flowed into a column in which they all share the same width.

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>

A large table with horizontal scroll and sticky header

1 Answers1