Last active
June 5, 2022 14:46
-
-
Save skysan87/532d4c576e7c5f491262397d89f39d86 to your computer and use it in GitHub Desktop.
CSS Grid Layoutで複数行と列の固定するテーブルサンプル
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <!DOCTYPE html> | |
| <html lang="en"> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <meta http-equiv="X-UA-Compatible" content="IE=edge"> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> | |
| <script src="https://unpkg.com/vue@next"></script> | |
| <link href="https://unpkg.com/tailwindcss@^2/dist/tailwind.min.css" rel="stylesheet"> | |
| <title>gird with fixed rows and cols</title> | |
| </head> | |
| <body> | |
| <div id="app"> | |
| <div class="grid-table"> | |
| <!-- fixed row --> | |
| <!-- fixed column --> | |
| <div class="cross-header header" style="left: 0px; top: 0px;">head 1-1</div> | |
| <div class="cross-header header" style="left: 100px; top: 0px;">head 1-2</div> | |
| <template v-for="(row, i) in 30" :key="i"> | |
| <div class="header" style="top: 0px;">head 1-{{ i + 3 }}</div> | |
| </template> | |
| <template v-for="(__, ri) in 50" :key="ri"> | |
| <!-- fixed column --> | |
| <div class="header" style="left: 0px;">cell {{ ri }}-1</div> | |
| <div class="header" style="left: 100px;">cell {{ ri }}-2</div> | |
| <template v-for="(_, i) in 30" :key="i"> | |
| <div class="">cell {{ ri }}-{{ i + 3 }}</div> | |
| </template> | |
| </template> | |
| </div> | |
| </div> | |
| </body> | |
| <script> | |
| Vue.createApp({}).mount('#app') | |
| </script> | |
| <style> | |
| .grid-table { | |
| width: 100%; | |
| display: grid; | |
| grid-template-columns: 100px 100px repeat(30, 70px); | |
| grid-template-rows: repeat(auto-fill, auto); | |
| height: 100vh; | |
| font-size: 1em; | |
| overflow-x: auto; | |
| overflow-y: auto; | |
| border: 1px solid #E3E4E4; | |
| border-left: none; | |
| } | |
| .grid-table > div { | |
| border-bottom: 1px solid black; | |
| border-right: 1px solid black; | |
| } | |
| .header { | |
| background-color: #F9F9FA; | |
| position: sticky; | |
| padding: 5px; | |
| z-index: 10; | |
| } | |
| .cross-header { | |
| z-index: 20; | |
| } | |
| </style> | |
| </html> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment