jmakeig · February 12, 2022 19:30 · jmakeig · Feb 12, 2022
diff --git a/table.html b/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>