ឯកសា > Component
Tailwind CSS Table
Use the table componen ដើម្បីបង្ហាញអត្ថបទ រូបភាព តំណ និងធាតុផ្សេងទៀតនៅក្នុងសំណុំទិន្នន័យដែលមានរចនាសម្ព័ន្ធដែលបង្កើតឡើងដោយជួរដេក និងជួរឈរនៃតារាង
Default table
Use the following example of a responsive table component to show multiple rows and columns of text data.
| Product name | Color | Category | Price |
|---|---|---|---|
| Apple MacBook Pro 17" | Silver | Laptop | $2999 |
| Microsoft Surface Pro | White | Laptop PC | $1999 |
| Magic Mouse 2 | Black | Accessories | $99 |
HTML
Table with shadow
Use this example to apply a shadow border to the table component.
| Product name | Color | Category | Price | Action |
|---|---|---|---|---|
| Apple MacBook Pro 17" | Silver | Laptop | $2999 | Edit |
| Microsoft Surface Pro | White | Laptop PC | $1999 | Edit |
| Magic Mouse 2 | Black | Accessories | $99 | Edit |
HTML
Table colors
| Product name | Color | Category | Price | Action |
|---|---|---|---|---|
| Apple MacBook Pro 17" | Silver | Laptop | $2999 | Edit |
| Microsoft Surface Pro | White | Laptop PC | $1999 | Edit |
| Magic Mouse 2 | Black | Accessories | $99 | Edit |
| Google Pixel Phone | Gray | Phone | $799 | Edit |
| Apple Watch 5 | Red | Wearables | $999 | Edit |
HTML