--- title: "Table" type: component version: "2.2.2" doc_version: "2.7.3" status: stable date: 2026-07-05 library: Frutjam stack: tailwind_css compatibility: universal framework_agnostic: true runtime_requirement: none description: "Tailwind CSS Table with striped rows, sticky headers, and compact sizing. Semantic HTML for accessible, responsive data display in dashboards and listings." url: https://frutjam.com/zh-hant/components/table --- # Table Component 表組件按行和列組織和顯示結構化資料。表格採用語義 HTML 表格元素和 Tailwind CSS 樣式構建，支援排序、條紋行、懸停效果和響應式溢出處理。 Frutjam 表系統可透過適當的標題關聯進行訪問，並與資料視覺化框架無縫協作。僅 CSS，無需 JavaScript。 WCAG AA 可存取且與框架無關 - 可與 Django、HTMX、Laravel、React 和任何堆疊配合使用。 | 班級 | 類型 | 描述 | | ---------------- | --- | ------------------ | | table | 根據 | 具有一致間距的樣式化 HTML 表格 | | table-zebra | 風格 | 交替行背景顏色 | | table-zebra-rows | 風格 | 僅在正文行上交替行背景 | | table-zebra-cols | 風格 | 交替列背景顏色 | | table-hover | 風格 | 懸停時突出顯示行 | | table-pin-rows | 修飾符 | 滾動時黏住頁首和頁尾行 | | table-pin-cols | 修飾符 | 滾動時粘住第一列和最後一列 | | table-xs | 尺寸 | 超小行填充 | | table-sm | 尺寸 | 小行填充 | | table-md | 尺寸 | 中行填充（預設） | | table-lg | 尺寸 | 大行填充 | | table-xl | 尺寸 | 超大行填充 | ## 桌子 ## 桌子尺寸 ### 超小桌`(table-xs)` 在下面的表格大小範例中，我們使用 `table-xs` （超小）。您可以使用 `table-{size}` 實用程式類別調整表格大小，包括 `table-xs`、`table-sm`、`table-md`、`table-lg` 和 `table-xl`，範圍從超緊湊佈局到更緊湊、可讀的表格。 ```html

	Framework	Creator	Core Purpose
1	Next.js	Vercel	React-based SSR (Server-Side Rendering) & Static Site Generation
2	Vue 3	Evan You	Progressive JavaScript Framework for building UIs
3	Svelte	Rich Harris	Compiles to minimal vanilla JavaScript for fast performance
4	Remix	Ryan Florence, Michael Jackson	React Framework focused on user experience and performance
5	Astro	Fred K. Schott	Builds fast websites using components from React, Vue, Svelte, etc.

``` ## 表斑馬（條紋）行 ```html

	City	Country	Population
1	Tokyo	Japan	37.4 million
2	New York	USA	8.4 million
3	Paris	France	2.1 million

``` ## 表斑馬（條紋）列 ```html

	City	Country	Population
1	Tokyo	Japan	37.4 million
2	New York	USA	8.4 million
3	Paris	France	2.1 million

``` ## 表格在懸停時突出顯示行 ```html

	City	Country	Population
1	Tokyo	Japan	37.4 million
2	New York	USA	8.4 million
3	Paris	France	2.1 million
3	Paris	France	2.1 million

``` ## 具有黏性（固定）標題行的表格 ```html

A
Apple
Apricot
Avocado
B
Banana
Blackberry
Blueberry
C
Cherry
Coconut
Cranberry
D
Date
Dragon Fruit
G
Grape
Guava
K
Kiwi
M
Mango
Melon
O
Orange
P
Papaya
Pineapple
Pomegranate
S
Strawberry
W
Watermelon

``` ## 表格固定（固定）列水平捲動 ```html

#	Framework	Type	Maintained By	Learning Curve	First Release	Popularity	Rank
1	React	Library	Meta	Medium	2013	Very High	1
2	Angular	Framework	Google	High	2016	High	2
3	Vue	Framework	Open Source	Low	2014	High	3
4	Svelte	Compiler	Open Source	Low	2016	Medium	4
5	Next.js	Framework	Vercel	Medium	2016	Very High	5
6	Nuxt	Framework	Open Source	Medium	2016	Medium	6
7	SolidJS	Library	Open Source	Medium	2020	Growing	7
8	Ember	Framework	Open Source	High	2011	Low	8
9	Backbone	Library	Open Source	Medium	2010	Low	9
10	Alpine.js	Library	Open Source	Very Low	2019	Medium	10
11	Preact	Library	Open Source	Low	2015	Medium	11
12	Lit	Library	Google	Low	2018	Growing	12
13	Meteor	Framework	Open Source	Medium	2012	Low	13
14	Aurelia	Framework	Open Source	Medium	2016	Low	14
15	Qwik	Framework	Builder.io	Medium	2022	Growing	15
16	Fresh	Framework	Deno	Low	2022	Growing	16
17	Remix	Framework	Shopify	Medium	2021	High	17
18	Astro	Framework	Open Source	Low	2021	High	18
19	Marko	Framework	eBay	Medium	2014	Low	19
20	Inferno	Library	Open Source	Medium	2016	Low	20
#	Framework	Type	Maintained By	Learning Curve	First Release	Popularity	Rank

``` ## 表固定列行 ```html

#	Framework	Type	Maintained By	Learning Curve	First Release	Popularity	Rank
1	React	Library	Meta	Medium	2013	Very High	1
2	Angular	Framework	Google	High	2016	High	2
3	Vue	Framework	Open Source	Low	2014	High	3
4	Svelte	Compiler	Open Source	Low	2016	Medium	4
5	Next.js	Framework	Vercel	Medium	2016	Very High	5
6	Nuxt	Framework	Open Source	Medium	2016	Medium	6
7	SolidJS	Library	Open Source	Medium	2020	Growing	7
8	Ember	Framework	Open Source	High	2011	Low	8
9	Backbone	Library	Open Source	Medium	2010	Low	9
10	Alpine.js	Library	Open Source	Very Low	2019	Medium	10
11	Preact	Library	Open Source	Low	2015	Medium	11
12	Lit	Library	Google	Low	2018	Growing	12
13	Meteor	Framework	Open Source	Medium	2012	Low	13
14	Aurelia	Framework	Open Source	Medium	2016	Low	14
15	Qwik	Framework	Builder.io	Medium	2022	Growing	15
16	Fresh	Framework	Deno	Low	2022	Growing	16
17	Remix	Framework	Shopify	Medium	2021	High	17
18	Astro	Framework	Open Source	Low	2021	High	18
19	Marko	Framework	eBay	Medium	2014	Low	19
20	Inferno	Library	Open Source	Medium	2016	Low	20
#	Framework	Type	Maintained By	Learning Curve	First Release	Popularity	Rank

``` ## 帶有複選框選擇的表 ```html

Project	Category	Primary Tech
Landing Page Redesign Production	Frontend UI / UX	Tailwind CSS
Auth API Service Backend	API Authentication	Node.js
E-commerce Dashboard Internal Tool	Full Stack Admin Panel	Next.js
CI Pipeline Infrastructure	DevOps Automation	GitHub Actions
Project	Category	Primary Tech

```