Skip to content

Instantly share code, notes, and snippets.

@jmakeig
Last active February 12, 2022 19:30
Show Gist options
  • Save jmakeig/f60c17c0b2b4d99fbdb77a381d3a777e to your computer and use it in GitHub Desktop.
Save jmakeig/f60c17c0b2b4d99fbdb77a381d3a777e to your computer and use it in GitHub Desktop.
Default table CSS
<!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>
@jmakeig
Copy link
Author

jmakeig commented Feb 12, 2022

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment