--- 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/vi/components/table --- # Table Component Các thành phần bảng sắp xếp và hiển thị dữ liệu có cấu trúc theo hàng và cột. Được xây dựng bằng các thành phần bảng HTML ngữ nghĩa và kiểu CSS Tailwind, các bảng hỗ trợ sắp xếp, hàng sọc, hiệu ứng di chuột và xử lý tràn phản hồi. Hệ thống bảng Frutjam có thể truy cập được bằng các liên kết tiêu đề phù hợp và hoạt động liền mạch với các khung trực quan hóa dữ liệu. Chỉ CSS, không cần JavaScript. WCAG AA có thể truy cập và không phụ thuộc vào khung — hoạt động với Django, HTMX, Laravel, React và bất kỳ ngăn xếp nào. | Lớp học | Kiểu | Sự miêu tả | | ---------------- | --------------- | --------------------------------------------------- | | table | Căn cứ | Bảng HTML được tạo kiểu với khoảng cách nhất quán | | table-zebra | Phong cách | Màu nền hàng xen kẽ | | table-zebra-rows | Phong cách | Nền hàng xen kẽ chỉ trên các hàng tbody | | table-zebra-cols | Phong cách | Màu nền cột xen kẽ | | table-hover | Phong cách | Đánh dấu các hàng khi di chuột | | table-pin-rows | Công cụ sửa đổi | Dán các hàng đầu trang và chân trang trong khi cuộn | | table-pin-cols | Công cụ sửa đổi | Dán cột đầu tiên và cuối cùng trong khi cuộn | | table-xs | Kích cỡ | Khoảng đệm hàng cực nhỏ | | table-sm | Kích cỡ | Đệm hàng nhỏ | | table-md | Kích cỡ | Khoảng đệm hàng trung bình (mặc định) | | table-lg | Kích cỡ | Đệm hàng lớn | | table-xl | Kích cỡ | Khoảng đệm hàng cực lớn | ## Bàn ## Kích thước bàn ### Bảng cực nhỏ `(table-xs)` Trong ví dụ về kích thước bảng bên dưới, chúng tôi sử dụng `table-xs` (cực nhỏ). Bạn có thể điều chỉnh kích thước bảng bằng cách sử dụng các lớp tiện ích `table-{size}`, bao gồm `table-xs`, `table-sm`, `table-md`, `table-lg` và `table-xl`, từ các bố cục siêu nhỏ gọn đến các bảng rộng rãi hơn, dễ đọc hơn. ```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.
``` ## Bảng ngựa vằn (sọc) hàng ```html
City Country Population
1 Tokyo Japan 37.4 million
2 New York USA 8.4 million
3 Paris France 2.1 million
``` ## Bảng cột ngựa vằn (sọc) ```html
City Country Population
1 Tokyo Japan 37.4 million
2 New York USA 8.4 million
3 Paris France 2.1 million
``` ## Hàng đánh dấu bảng khi di chuột ```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
``` ## Bảng có các hàng tiêu đề dính (được ghim) ```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
``` ## Bảng cố định (được ghim) cột cuộn ngang ```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
``` ## Các hàng cột được ghim trong bảng ```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
``` ## Bảng có lựa chọn Hộp kiểm ```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
```