Table with sticky headers

Note, the following: does not work on IE11. In Edge, the borders of the table header cells disappear but it otherwise works. In Firefox, Safari (on MacOS and iOS), and Chrome, it works as expected. (The horizontal scroll is a bit hard to find in Safari though).

Example Col 1 Example Col 2 Example Col 3 Example Col 4 Example Col 5 Example Col 6 Example Col 7 Example Col 8 Example Col 9 Example Col 10 Example Col 11 Example Col 12 Example Col 13 Example Col 14 Example Col 15 Example Col 16 Example Col 17 Example Col 18 Example Col 19 Example Col 20
Example data Example data Example data Example data Example data Example data Example data Example data Example data Example data Example data Example data Example data Example data Example data Example data Example data Example data Example data Example data
Example data Example data Example data Example data Example data Example data Example data Example data Example data Example data Example data Example data Example data Example data Example data Example data Example data Example data Example data Example data
Example data Example data Example data Example data Example data Example data Example data Example data Example data Example data Example data Example data Example data Example data Example data Example data Example data Example data Example data Example data
Example data Example data Example data Example data Example data Example data Example data Example data Example data Example data Example data Example data Example data Example data Example data Example data Example data Example data Example data Example data
Example data Example data Example data Example data Example data Example data Example data Example data Example data Example data Example data Example data Example data Example data Example data Example data Example data Example data Example data Example data
Example data Example data Example data Example data Example data Example data Example data Example data Example data Example data Example data Example data Example data Example data Example data Example data Example data Example data Example data Example data
Example data Example data Example data Example data Example data Example data Example data Example data Example data Example data Example data Example data Example data Example data Example data Example data Example data Example data Example data Example data
Example data Example data Example data Example data Example data Example data Example data Example data Example data Example data Example data Example data Example data Example data Example data Example data Example data Example data Example data Example data
Example data Example data Example data Example data Example data Example data Example data Example data Example data Example data Example data Example data Example data Example data Example data Example data Example data Example data Example data Example data
Example data Example data Example data Example data Example data Example data Example data Example data Example data Example data Example data Example data Example data Example data Example data Example data Example data Example data Example data Example data
Example data Example data Example data Example data Example data Example data Example data Example data Example data Example data Example data Example data Example data Example data Example data Example data Example data Example data Example data Example data
Example data Example data Example data Example data Example data Example data Example data Example data Example data Example data Example data Example data Example data Example data Example data Example data Example data Example data Example data Example data
Example data Example data Example data Example data Example data Example data Example data Example data Example data Example data Example data Example data Example data Example data Example data Example data Example data Example data Example data Example data
Example data Example data Example data Example data Example data Example data Example data Example data Example data Example data Example data Example data Example data Example data Example data Example data Example data Example data Example data Example data
Example data Example data Example data Example data Example data Example data Example data Example data Example data Example data Example data Example data Example data Example data Example data Example data Example data Example data Example data Example data
Example data Example data Example data Example data Example data Example data Example data Example data Example data Example data Example data Example data Example data Example data Example data Example data Example data Example data Example data Example data
Example data Example data Example data Example data Example data Example data Example data Example data Example data Example data Example data Example data Example data Example data Example data Example data Example data Example data Example data Example data
Example data Example data Example data Example data Example data Example data Example data Example data Example data Example data Example data Example data Example data Example data Example data Example data Example data Example data Example data Example data
Example data Example data Example data Example data Example data Example data Example data Example data Example data Example data Example data Example data Example data Example data Example data Example data Example data Example data Example data Example data
Example data Example data Example data Example data Example data Example data Example data Example data Example data Example data Example data Example data Example data Example data Example data Example data Example data Example data Example data Example data
Example data Example data Example data Example data Example data Example data Example data Example data Example data Example data Example data Example data Example data Example data Example data Example data Example data Example data Example data Example data
Example data Example data Example data Example data Example data Example data Example data Example data Example data Example data Example data Example data Example data Example data Example data Example data Example data Example data Example data Example data
Example data Example data Example data Example data Example data Example data Example data Example data Example data Example data Example data Example data Example data Example data Example data Example data Example data Example data Example data Example data
Example data Example data Example data Example data Example data Example data Example data Example data Example data Example data Example data Example data Example data Example data Example data Example data Example data Example data Example data Example data
Example data Example data Example data Example data Example data Example data Example data Example data Example data Example data Example data Example data Example data Example data Example data Example data Example data Example data Example data Example data
Example data Example data Example data Example data Example data Example data Example data Example data Example data Example data Example data Example data Example data Example data Example data Example data Example data Example data Example data Example data
Example data Example data Example data Example data Example data Example data Example data Example data Example data Example data Example data Example data Example data Example data Example data Example data Example data Example data Example data Example data
Example data Example data Example data Example data Example data Example data Example data Example data Example data Example data Example data Example data Example data Example data Example data Example data Example data Example data Example data Example data
Example data Example data Example data Example data Example data Example data Example data Example data Example data Example data Example data Example data Example data Example data Example data Example data Example data Example data Example data Example data
Example data Example data Example data Example data Example data Example data Example data Example data Example data Example data Example data Example data Example data Example data Example data Example data Example data Example data Example data Example data
Example data Example data Example data Example data Example data Example data Example data Example data Example data Example data Example data Example data Example data Example data Example data Example data Example data Example data Example data Example data
Example data Example data Example data Example data Example data Example data Example data Example data Example data Example data Example data Example data Example data Example data Example data Example data Example data Example data Example data Example data
Example data Example data Example data Example data Example data Example data Example data Example data Example data Example data Example data Example data Example data Example data Example data Example data Example data Example data Example data Example data
Example data Example data Example data Example data Example data Example data Example data Example data Example data Example data Example data Example data Example data Example data Example data Example data Example data Example data Example data Example data
Example data Example data Example data Example data Example data Example data Example data Example data Example data Example data Example data Example data Example data Example data Example data Example data Example data Example data Example data Example data
Example data Example data Example data Example data Example data Example data Example data Example data Example data Example data Example data Example data Example data Example data Example data Example data Example data Example data Example data Example data
Example data Example data Example data Example data Example data Example data Example data Example data Example data Example data Example data Example data Example data Example data Example data Example data Example data Example data Example data Example data
Example data Example data Example data Example data Example data Example data Example data Example data Example data Example data Example data Example data Example data Example data Example data Example data Example data Example data Example data Example data
Example data Example data Example data Example data Example data Example data Example data Example data Example data Example data Example data Example data Example data Example data Example data Example data Example data Example data Example data Example data
Example data Example data Example data Example data Example data Example data Example data Example data Example data Example data Example data Example data Example data Example data Example data Example data Example data Example data Example data Example data
Example data Example data Example data Example data Example data Example data Example data Example data Example data Example data Example data Example data Example data Example data Example data Example data Example data Example data Example data Example data
Example data Example data Example data Example data Example data Example data Example data Example data Example data Example data Example data Example data Example data Example data Example data Example data Example data Example data Example data Example data
Example data Example data Example data Example data Example data Example data Example data Example data Example data Example data Example data Example data Example data Example data Example data Example data Example data Example data Example data Example data
Example data Example data Example data Example data Example data Example data Example data Example data Example data Example data Example data Example data Example data Example data Example data Example data Example data Example data Example data Example data
Example data Example data Example data Example data Example data Example data Example data Example data Example data Example data Example data Example data Example data Example data Example data Example data Example data Example data Example data Example data
Example data Example data Example data Example data Example data Example data Example data Example data Example data Example data Example data Example data Example data Example data Example data Example data Example data Example data Example data Example data
Example data Example data Example data Example data Example data Example data Example data Example data Example data Example data Example data Example data Example data Example data Example data Example data Example data Example data Example data Example data
Example data Example data Example data Example data Example data Example data Example data Example data Example data Example data Example data Example data Example data Example data Example data Example data Example data Example data Example data Example data
Example data Example data Example data Example data Example data Example data Example data Example data Example data Example data Example data Example data Example data Example data Example data Example data Example data Example data Example data Example data
Example data Example data Example data Example data Example data Example data Example data Example data Example data Example data Example data Example data Example data Example data Example data Example data Example data Example data Example data Example data
Example data Example data Example data Example data Example data Example data Example data Example data Example data Example data Example data Example data Example data Example data Example data Example data Example data Example data Example data Example data
Example data Example data Example data Example data Example data Example data Example data Example data Example data Example data Example data Example data Example data Example data Example data Example data Example data Example data Example data Example data
Example data Example data Example data Example data Example data Example data Example data Example data Example data Example data Example data Example data Example data Example data Example data Example data Example data Example data Example data Example data
Example data Example data Example data Example data Example data Example data Example data Example data Example data Example data Example data Example data Example data Example data Example data Example data Example data Example data Example data Example data
Example data Example data Example data Example data Example data Example data Example data Example data Example data Example data Example data Example data Example data Example data Example data Example data Example data Example data Example data Example data
Example data Example data Example data Example data Example data Example data Example data Example data Example data Example data Example data Example data Example data Example data Example data Example data Example data Example data Example data Example data
Example data Example data Example data Example data Example data Example data Example data Example data Example data Example data Example data Example data Example data Example data Example data Example data Example data Example data Example data Example data
Example data Example data Example data Example data Example data Example data Example data Example data Example data Example data Example data Example data Example data Example data Example data Example data Example data Example data Example data Example data
Example data Example data Example data Example data Example data Example data Example data Example data Example data Example data Example data Example data Example data Example data Example data Example data Example data Example data Example data Example data
Example data Example data Example data Example data Example data Example data Example data Example data Example data Example data Example data Example data Example data Example data Example data Example data Example data Example data Example data Example data
Example data Example data Example data Example data Example data Example data Example data Example data Example data Example data Example data Example data Example data Example data Example data Example data Example data Example data Example data Example data
Example data Example data Example data Example data Example data Example data Example data Example data Example data Example data Example data Example data Example data Example data Example data Example data Example data Example data Example data Example data
Example data Example data Example data Example data Example data Example data Example data Example data Example data Example data Example data Example data Example data Example data Example data Example data Example data Example data Example data Example data
Example data Example data Example data Example data Example data Example data Example data Example data Example data Example data Example data Example data Example data Example data Example data Example data Example data Example data Example data Example data
Example data Example data Example data Example data Example data Example data Example data Example data Example data Example data Example data Example data Example data Example data Example data Example data Example data Example data Example data Example data
Example data Example data Example data Example data Example data Example data Example data Example data Example data Example data Example data Example data Example data Example data Example data Example data Example data Example data Example data Example data
Example data Example data Example data Example data Example data Example data Example data Example data Example data Example data Example data Example data Example data Example data Example data Example data Example data Example data Example data Example data
Example data Example data Example data Example data Example data Example data Example data Example data Example data Example data Example data Example data Example data Example data Example data Example data Example data Example data Example data Example data
Example data Example data Example data Example data Example data Example data Example data Example data Example data Example data Example data Example data Example data Example data Example data Example data Example data Example data Example data Example data
Example data Example data Example data Example data Example data Example data Example data Example data Example data Example data Example data Example data Example data Example data Example data Example data Example data Example data Example data Example data
Example data Example data Example data Example data Example data Example data Example data Example data Example data Example data Example data Example data Example data Example data Example data Example data Example data Example data Example data Example data
Example data Example data Example data Example data Example data Example data Example data Example data Example data Example data Example data Example data Example data Example data Example data Example data Example data Example data Example data Example data
Example data Example data Example data Example data Example data Example data Example data Example data Example data Example data Example data Example data Example data Example data Example data Example data Example data Example data Example data Example data
Example data Example data Example data Example data Example data Example data Example data Example data Example data Example data Example data Example data Example data Example data Example data Example data Example data Example data Example data Example data
Example data Example data Example data Example data Example data Example data Example data Example data Example data Example data Example data Example data Example data Example data Example data Example data Example data Example data Example data Example data
Example data Example data Example data Example data Example data Example data Example data Example data Example data Example data Example data Example data Example data Example data Example data Example data Example data Example data Example data Example data
Example data Example data Example data Example data Example data Example data Example data Example data Example data Example data Example data Example data Example data Example data Example data Example data Example data Example data Example data Example data
Example data Example data Example data Example data Example data Example data Example data Example data Example data Example data Example data Example data Example data Example data Example data Example data Example data Example data Example data Example data
Example data Example data Example data Example data Example data Example data Example data Example data Example data Example data Example data Example data Example data Example data Example data Example data Example data Example data Example data Example data
Example data Example data Example data Example data Example data Example data Example data Example data Example data Example data Example data Example data Example data Example data Example data Example data Example data Example data Example data Example data
Example data Example data Example data Example data Example data Example data Example data Example data Example data Example data Example data Example data Example data Example data Example data Example data Example data Example data Example data Example data
Example data Example data Example data Example data Example data Example data Example data Example data Example data Example data Example data Example data Example data Example data Example data Example data Example data Example data Example data Example data
Example data Example data Example data Example data Example data Example data Example data Example data Example data Example data Example data Example data Example data Example data Example data Example data Example data Example data Example data Example data
Example data Example data Example data Example data Example data Example data Example data Example data Example data Example data Example data Example data Example data Example data Example data Example data Example data Example data Example data Example data
Example data Example data Example data Example data Example data Example data Example data Example data Example data Example data Example data Example data Example data Example data Example data Example data Example data Example data Example data Example data
Example data Example data Example data Example data Example data Example data Example data Example data Example data Example data Example data Example data Example data Example data Example data Example data Example data Example data Example data Example data
Example data Example data Example data Example data Example data Example data Example data Example data Example data Example data Example data Example data Example data Example data Example data Example data Example data Example data Example data Example data
Example data Example data Example data Example data Example data Example data Example data Example data Example data Example data Example data Example data Example data Example data Example data Example data Example data Example data Example data Example data
Example data Example data Example data Example data Example data Example data Example data Example data Example data Example data Example data Example data Example data Example data Example data Example data Example data Example data Example data Example data
Example data Example data Example data Example data Example data Example data Example data Example data Example data Example data Example data Example data Example data Example data Example data Example data Example data Example data Example data Example data
Example data Example data Example data Example data Example data Example data Example data Example data Example data Example data Example data Example data Example data Example data Example data Example data Example data Example data Example data Example data
Example data Example data Example data Example data Example data Example data Example data Example data Example data Example data Example data Example data Example data Example data Example data Example data Example data Example data Example data Example data
Example data Example data Example data Example data Example data Example data Example data Example data Example data Example data Example data Example data Example data Example data Example data Example data Example data Example data Example data Example data
Example data Example data Example data Example data Example data Example data Example data Example data Example data Example data Example data Example data Example data Example data Example data Example data Example data Example data Example data Example data
Example data Example data Example data Example data Example data Example data Example data Example data Example data Example data Example data Example data Example data Example data Example data Example data Example data Example data Example data Example data
Example data Example data Example data Example data Example data Example data Example data Example data Example data Example data Example data Example data Example data Example data Example data Example data Example data Example data Example data Example data
Example data Example data Example data Example data Example data Example data Example data Example data Example data Example data Example data Example data Example data Example data Example data Example data Example data Example data Example data Example data
Example data Example data Example data Example data Example data Example data Example data Example data Example data Example data Example data Example data Example data Example data Example data Example data Example data Example data Example data Example data
Example data Example data Example data Example data Example data Example data Example data Example data Example data Example data Example data Example data Example data Example data Example data Example data Example data Example data Example data Example data
Example data Example data Example data Example data Example data Example data Example data Example data Example data Example data Example data Example data Example data Example data Example data Example data Example data Example data Example data Example data

Explanations are in the CSS comments:

.sticky-table {
	/* Force scroll bars to appear on the element containing the
	   table if it is large enough. */
	max-height: 80vh;
	max-width: 100%;
	overflow: auto;
	/* Set this as the reference element for sticky positioning */
	position: relative;
}

/* Collapsed borders cause issues with border rendering in sticky
   cells. Instead, separate the borders by length 0 and, in later
   styles, ensure there is only a single 1px border per cell side. */
.sticky-table table {
	border-collapse: separate;
	border-spacing: 0;
}

/* Make the header elements sticky to the top of the reference
   conatiner. */
.sticky-table th {
	/* Make table headers stick on iOS Safari */
	position: -webkit-sticky;
	/* ...and all other devices that support it */
	position: sticky;
	top: 0;
}

/* By default, style the top, left borders of all cells (header and
   body). For now, this leaves right and bottom cells open. */
.sticky-table td, .sticky-table th {
	border: none;
	border-top: 1px solid grey;
	border-left: 1px solid grey;
}

/* For the last cells in each row, add the right border. */
.sticky-table td:last-child, .sticky-table th:last-child {
	border-right: 1px solid grey;
}

/* For the last header row, ensure there is a border separating it
   from the cells scrolling underneath it as it scrolls over them. */
.sticky-table thead tr:last-child th {
	border-bottom: 1px solid grey;
}

/* The first body row's border comes from the header cells, so it's not
   needed here */
.sticky-table tbody tr:first-child td {
	border-top: none;
}

/* Add a border to the final row that's displayed. */
.sticky-table tr:last-child td {
	border-bottom: 1px solid grey;
}

/* Specific to this example: add some padding. */
#example-sticky-table-header th, #example-sticky-table-header td {
	padding: .3em;
}

/* Specific to this example: add colors. A bit lazy, since it does
   not take a light-mode preference into consideration; but that
   is not the point of this post. */
#example-sticky-table-header th {
	background-color: black;
	color: whitesmoke;
}

Leave a Reply

Your email address will not be published.

Color scheme: