Skip to content

Instantly share code, notes, and snippets.

@ponko23

ponko23/css-grid.html

Last active November 12, 2023 15:12
Show Gist options
  • Save ponko23/dd854bc6658f90cb751b706e285493fc to your computer and use it in GitHub Desktop.
Save ponko23/dd854bc6658f90cb751b706e285493fc to your computer and use it in GitHub Desktop.
Download ZIP
css grid for table layout
Raw
css-grid.html
<html lang="ja">
<head>
<style>
:root {
--border: 1px solid black;
}
@scope (#content) {
:scope {
margin-inline: auto;
max-width: calc(1000px + 15px);
}
table, thead, tbody, tr, th, td {
display: grid;
padding: 0;
margin: 0;
}
table {
height: calc(100vh - 20px);
overflow: hidden;
grid-template-columns: repeat(10, 1fr) 15px;
border: var(--border);
}
thead, tbody, tr {
grid-template-columns: subgrid;
grid-column: span 11;
}
tr {
border-bottom: var(--border);
}
tbody {
grid-auto-rows: 20px;
& tr, td {
grid-template-rows: subgrid;
grid-row: span 5;
}
& tr:last-child {
border-bottom: none;
}
overflow-x: hidden;
overflow-y: scroll;
}
th, td {
grid-column: span 2;
grid-column-gap: 5px;
border-right: var(--border);
&:last-child {
border-right: none;
grid-column: span 3;
}
}
}
</style>
</head>
<body>
<div id="content">
<table>
<thead>
<tr>
<th>列1</th>
<th>列2</th>
<th>列3</th>
<th>列4</th>
<th>列5</th>
</tr>
</thead>
<tbody>
<tr>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
</tbody>
</table>
</div>
</body>
</html>
@ponko23
Copy link
Author

ponko23 commented Nov 12, 2023

css gridとsubgrid使ってtableを整えてcellにいい感じにととのえる

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