[[📕Tailwind CSSでよく使う表現#スクロールしてもヘッダを固定]] を使って表現する。以下は[[Vue]]でつくったテーブルコンポーネントのスニペット例。
## コンポーネント
`Table.vue`
```html
<template>
<div><slot></slot></div>
</template>
```
`TableBody.vue`
```html
<template>
<div><slot></slot></div>
</template>
```
`Header.vue`
```html
<template>
<!-- ページに固定ヘッダがあり、ページスクロールでヘッダ固定するならtopは調整が必要 -->
<div class="flex items-center bg-amber-200 h-8 pl-3 sticky top-0 z-10">
<slot></slot>
</div>
</template>
```
`HeaderCol.vue`
```html
<template>
<div><slot></slot></div>
</template>
```
`Row.vue`
```html
<template>
<div class="flex items-center bg-amber-50 h-8 pl-3">
<slot></slot>
</div>
</template>
```
`Col.vue`
```html
<template>
<div><slot></slot></div>
</template>
```
## 本体
`App.vue`
```html
<script setup lang="ts">
import Header from "./components/Header.vue";
import HeaderCol from "./components/HeaderCol.vue";
import Row from "./components/Row.vue";
import Col from "./components/Col.vue";
import Table from "./components/Table.vue";
import TableBody from "./components/TableBody.vue";
</script>
<template>
<div class="flex flex-col justify-center items-center p-8 h-96">
<!-- overflow-y-auto をつけるとテーブル内部スクロールでヘッダ固定 -->
<!-- overflow-y-auto をつけないとテーブル外部スクロールでヘッダ固定 -->
<Table>
<Header>
<HeaderCol class="w-40">head1</HeaderCol>
<HeaderCol class="w-40">head2</HeaderCol>
<HeaderCol class="w-40">head3</HeaderCol>
</Header>
<TableBody data-testid="ボディ">
<Row>
<Col class="w-40">body1</Col>
<Col class="w-40">body1</Col>
<Col class="w-40">body1</Col>
</Row>
<Row>
<Col class="w-40">body2</Col>
<Col class="w-40">body2</Col>
<Col class="w-40">body2</Col>
</Row>
<Row>
<Col class="w-40">body3</Col>
<Col class="w-40">body3</Col>
<Col class="w-40">body3</Col>
</Row>
</TableBody>
</Table>
</div>
</template>
```