JSFiddle - React, Tailwind, and code Playground

by Leo

HTML

<body>
	<div class="layout">
		<h1>Table 1: Exemplar (Static Image)</h1>
		<img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/1178242/Exemplar%20Table.png"/>
		<h1>Table 2: Stock Default</h1>
		<div class="container">
			<table>
				<thead>
					<tr>
						<th>Arbitrary Choice of Number</th>
						<th>Saucey-source</th>
						<th>Notable Quotation 1</th>
						<th>Notable Quotation 2</th>
					</tr>
				</thead>
				<tfoot>
					<tr>
						<th>Arbitrary Choice of Number</th>
						<th>Saucey-source</th>
						<th>Notable Quotation 1</th>
						<th>Notable Quotation 2</th>
					</tr>
				</tfoot>
				<tbody>
					<tr>
						<td>1</td>
						<td>Arrested Development</td>
						<td>I've opened a door here that I regret.</td>
						<td>I'm a monster.</td>
					</tr>
					<tr>
						<td>2</td>
						<td>Dexter</td>
						<td>I love Halloween.</td>
						<td>Under normal circumstances, I'd take that as a compliment.</td>
					</tr>
					<tr>
						<td>3</td>
						<td>Doctor Who</td>
						<td>You hit me with a cricket bat.</td>
						<td>Fezes are cool.</td>
					</tr>
					<tr>
						<td>4</td>
						<td>Futurama</td>
						<td>I forgot about the battle.</td>
						<td>Goodbye, cruel world.</td>
					</tr>
					<tr>
						<td>5</td>
						<td>Monthy Python and the Holy Grail</td>
						<td>A newt?</td>
						<td>Burn her anyway!</td>
					</tr>
					<tr>
						<td>6</td>
						<td>Star Wars</td>
						<td>In my experience, there is no such thing as luck.</td>
						<td>Did you ever hear the tragedy of Darth Plagueis The Wise?</td>
					</tr>
					<tr>
						<td>7</td>
						<td>The Simpsons</td>
						<td>Fame was like a drug.</td>
						<td>But what was even more like a drug were the drugs.</td>
					</tr>
				</tbody>
			</table>
		</div>
		<h1>Table 3: Positioning within Divs</h1>
		<div id="table3">
			<div class="container">
				<table>
					<thead>
						<tr>
							<th>Arbitrary Choice of Number
              
								<div>Arbitrary Choice of...

CSS

/* PAGE LAYOUT */
.layout {
	max-width: 60em;
	margin: auto;
}

.container {
	max-height: 20em;
	overflow-y: scroll;
	outline: 1px solid dimgrey;
	outline-offset: -1px;
}

h1 {
	color: dimgrey;
  font-family: sans-serif;
	font-weight: normal;
	white-space: nowrap;
	padding: 0.5em 1rem;
	border-bottom: 1px solid gainsboro;
}
/* PAGE LAYOUT END */

/* DEFAULT TABLE */
table {
	border-collapse: collapse;
}

th, td {
  font-family: sans-serif;
	background-color: gainsboro;
	padding: 1em;
	border: 1px solid white;
}

th {
	text-align: left;
	color: white;
	background-color: dimgrey;
}
/* DEFAULT TABLE END */

/* CUSTOM TABLE */
#table3 {
	position: relative;
	overflow: hidden;
}

#table3 th {
	white-space: nowrap;
}

#table3 th:first-child div {
	border-left: none;
}

#table3 th div {
	position: absolute;
	z-index: 2;
	font-weight: bold;
	width: 100%;
	color: white;
	background-color: dimgrey;
	padding: 1rem;
	border-left: 1px solid white;
	margin-left: calc(-1rem - 1px);
}

#table3 thead div {
	top: 0;
}

#table3 tfoot div {
	bottom: 0;
}
/* CUSTOM TABLE END */