Các tiện ích để kiểm soát thuật toán bố cục table.
| Class | Styles |
|---|---|
table-auto | table-layout: auto; |
table-fixed | table-layout: fixed; |
Sử dụng tiện ích table-auto để tự động điều chỉnh kích thước các cột của table sao cho phù hợp với nội dung của các ô:
| Song | Artist | Year |
|---|---|---|
| The Sliding Mr. Bones (Next Stop, Pottersville) | Malcolm Lockyer | 1961 |
| Witchy Woman | The Eagles | 1972 |
| Shining Star | Earth, Wind, and Fire | 1975 |
<table class="table-auto"> <thead> <tr> <th>Song</th> <th>Artist</th> <th>Year</th> </tr> </thead> <tbody> <tr> <td>The Sliding Mr. Bones (Next Stop, Pottersville)</td> <td>Malcolm Lockyer</td> <td>1961</td> </tr> <tr> <td>Witchy Woman</td> <td>The Eagles</td> <td>1972</td> </tr> <tr> <td>Shining Star</td> <td>Earth, Wind, and Fire</td> <td>1975</td> </tr> </tbody></table>Sử dụng tiện ích table-fixed để bỏ qua nội dung của các ô trong table và sử dụng chiều rộng cố định cho mỗi cột:
| Song | Artist | Year |
|---|---|---|
| The Sliding Mr. Bones (Next Stop, Pottersville) | Malcolm Lockyer | 1961 |
| Witchy Woman | The Eagles | 1972 |
| Shining Star | Earth, Wind, and Fire | 1975 |
<table class="table-fixed"> <thead> <tr> <th>Song</th> <th>Artist</th> <th>Year</th> </tr> </thead> <tbody> <tr> <td>The Sliding Mr. Bones (Next Stop, Pottersville)</td> <td>Malcolm Lockyer</td> <td>1961</td> </tr> <tr> <td>Witchy Woman</td> <td>The Eagles</td> <td>1972</td> </tr> <tr> <td>Shining Star</td> <td>Earth, Wind, and Fire</td> <td>1975</td> </tr> </tbody></table>Bạn có thể thủ công đặt chiều rộng cho một số cột và phần chiều rộng còn lại sẽ được chia đều cho các cột không có chiều rộng rõ ràng. Chiều rộng được đặt ở hàng đầu tiên sẽ thiết lập chiều rộng cột cho toàn bộ table.
Prefix a table-layout utility with a breakpoint variant like md: to only apply the utility at medium screen sizes and above:
<div class="table-auto md:table-fixed ..."> <!-- ... --></div>Learn more about using variants in the variants documentation.