jmakeig/table.html

## table.html
<!DOCTYPE html>
<html>
	<head>
		<title>Progenitor Mock-up</title>

		<style type="text/css">
			table {
				position: relative; /* Needed for sticky headers */

				width: 100%;

				table-layout: fixed; /* Uses first row to size. This renders faster for regular tables. */
				border-spacing: 0;
				border-collapse: separate; /* https://stackoverflow.com/a/53559396/563324 */
			}

			th,
			td {
				padding: 0.5em;

				border-width: 0.5px;
				border-style: solid solid none none;
				border-color: #ccc;

				text-align: left;

				font-variant-numeric: tabular-nums; /* Size numbers so they’re easy to compare across rows. */
			}

			thead > tr > th:first-of-type,
			tbody > tr > *:first-child {
				border-left-style: solid;
			}

			thead th[scope='column'] {
				position: sticky; /* Fixed headers */
				z-index: 10;
				top: -1px; /* Compensate for the top border so there’s no gap when sticky. */

				background-color: #eee;
			}

			tbody > tr:last-of-type > * {
				border-bottom-style: solid;
			}
		</style>
		<style type="text/css">
			html {
				font-family: Helvetica, sans-serif;
			}
			body {
				padding: 1em;

				display: flex;
			}
			#Container {
				padding: 0;

				/* max-height: 24em; */
				max-height: calc(100vh - 2em - 1px);
				flex-grow: 1;
				flex-shrink: 1;
				flex-basis: auto;

				overflow: scroll;

				border: solid 0.5px #ccc;
				border-radius: 1em;
				box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1),
					0 4px 6px -2px rgba(0, 0, 0, 0.05);
			}

			/* Clear the border for when there’s a zero-padding wrapper */
			thead > tr > th {
				border-top-style: none;
			}

			tr > *:last-child {
				border-right-style: none;
			}

			thead > tr > th:first-of-type,
			tbody > tr > *:first-child {
				border-left-style: none;
			}

			tbody > tr:last-of-type > * {
				border-bottom-style: none;
			}
			/* thead th .text {
				writing-mode: vertical-lr;
				transform: rotate(-45deg) translate(-2em, 0);
			} */
		</style>
	</head>

	<body>
		<div id="Container"></div>
	</body>
	<script type="text/javascript">
		const container = document.querySelector('#Container');
		const colDim = 'ABCDEFG'.split('').map((v) => ({ label: v }));
		const rowDim = new Array(50)
			.fill('')
			.map((v, i) => ({ label: String(i + 1) }));

		const colHeaders = `<tr><th scope="column"></th>${colDim
			.map((d) => `<th scope="column"><div class="text">${d.label}</div></th>`)
			.join('')}</tr>`;
		const rows = rowDim
			.map(
				(d) =>
					`<tr><th scope="row">${d.label}</th>${colDim
						.map((d) => `<td>${Math.floor(Math.random() * 1000)}</td>`)
						.join('')}</tr>`
			)
			.join('');
		const table = `<table><thead>${colHeaders}</thead><tbody>${rows}</tbody></table>`;

		/* Hack! */
		container.innerHTML = table;
	</script>
</html>
	<!DOCTYPE html>
	<html>
	<head>
	<title>Progenitor Mock-up</title>

	<style type="text/css">
	table {
	position: relative; /* Needed for sticky headers */

	width: 100%;

	table-layout: fixed; /* Uses first row to size. This renders faster for regular tables. */
	border-spacing: 0;
	border-collapse: separate; /* https://stackoverflow.com/a/53559396/563324 */
	}

	th,
	td {
	padding: 0.5em;

	border-width: 0.5px;
	border-style: solid solid none none;
	border-color: #ccc;

	text-align: left;

	font-variant-numeric: tabular-nums; /* Size numbers so they’re easy to compare across rows. */
	}

	thead > tr > th:first-of-type,
	tbody > tr > *:first-child {
	border-left-style: solid;
	}

	thead th[scope='column'] {
	position: sticky; /* Fixed headers */
	z-index: 10;
	top: -1px; /* Compensate for the top border so there’s no gap when sticky. */

	background-color: #eee;
	}

	tbody > tr:last-of-type > * {
	border-bottom-style: solid;
	}
	</style>
	<style type="text/css">
	html {
	font-family: Helvetica, sans-serif;
	}
	body {
	padding: 1em;

	display: flex;
	}
	#Container {
	padding: 0;

	/* max-height: 24em; */
	max-height: calc(100vh - 2em - 1px);
	flex-grow: 1;
	flex-shrink: 1;
	flex-basis: auto;

	overflow: scroll;

	border: solid 0.5px #ccc;
	border-radius: 1em;
	box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1),
	0 4px 6px -2px rgba(0, 0, 0, 0.05);
	}

	/* Clear the border for when there’s a zero-padding wrapper */
	thead > tr > th {
	border-top-style: none;
	}

	tr > *:last-child {
	border-right-style: none;
	}

	thead > tr > th:first-of-type,
	tbody > tr > *:first-child {
	border-left-style: none;
	}

	tbody > tr:last-of-type > * {
	border-bottom-style: none;
	}
	/* thead th .text {
	writing-mode: vertical-lr;
	transform: rotate(-45deg) translate(-2em, 0);
	} */
	</style>
	</head>

	<body>
	<div id="Container"></div>
	</body>
	<script type="text/javascript">
	const container = document.querySelector('#Container');
	const colDim = 'ABCDEFG'.split('').map((v) => ({ label: v }));
	const rowDim = new Array(50)
	.fill('')
	.map((v, i) => ({ label: String(i + 1) }));

	const colHeaders = `<tr><th scope="column"></th>${colDim
	.map((d) => `<th scope="column"><div class="text">${d.label}</div></th>`)
	.join('')}</tr>`;
	const rows = rowDim
	.map(
	(d) =>
	`<tr><th scope="row">${d.label}</th>${colDim
	.map((d) => `<td>${Math.floor(Math.random() * 1000)}</td>`)
	.join('')}</tr>`
	)
	.join('');
	const table = `<table><thead>${colHeaders}</thead><tbody>${rows}</tbody></table>`;

	/* Hack! */
	container.innerHTML = table;
	</script>
	</html>