表格
border-collapse
用於控制表格邊框應該合併還是分開的工具。
| 類別 | 樣式 |
|---|---|
border-collapse | border-collapse: collapse; |
border-separate | border-collapse: separate; |
範例
合併表格邊框
使用 border-collapse 工具在可能的情況下將相鄰的儲存格邊框合併為單一邊框
| 州 | 城市 |
|---|---|
| 印第安納州 | 印第安納波利斯 |
| 俄亥俄州 | 哥倫布 |
| 密西根州 | 底特律 |
<table class="border-collapse border border-gray-400 ..."> <thead> <tr> <th class="border border-gray-300 ...">State</th> <th class="border border-gray-300 ...">City</th> </tr> </thead> <tbody> <tr> <td class="border border-gray-300 ...">Indiana</td> <td class="border border-gray-300 ...">Indianapolis</td> </tr> <tr> <td class="border border-gray-300 ...">Ohio</td> <td class="border border-gray-300 ...">Columbus</td> </tr> <tr> <td class="border border-gray-300 ...">Michigan</td> <td class="border border-gray-300 ...">Detroit</td> </tr> </tbody></table>請注意，這包括合併最上層 <table> 標籤上的邊框。
分隔表格邊框
使用 border-separate 工具強制每個儲存格顯示其各自獨立的邊框
| 州 | 城市 |
|---|---|
| 印第安納州 | 印第安納波利斯 |
| 俄亥俄州 | 哥倫布 |
| 密西根州 | 底特律 |
<table class="border-separate border border-gray-400 ..."> <thead> <tr> <th class="border border-gray-300 ...">State</th> <th class="border border-gray-300 ...">City</th> </tr> </thead> <tbody> <tr> <td class="border border-gray-300 ...">Indiana</td> <td class="border border-gray-300 ...">Indianapolis</td> </tr> <tr> <td class="border border-gray-300 ...">Ohio</td> <td class="border border-gray-300 ...">Columbus</td> </tr> <tr> <td class="border border-gray-300 ...">Michigan</td> <td class="border border-gray-300 ...">Detroit</td> </tr> </tbody></table>響應式設計
前綴a border-collapse 工具 與像是 md: 的斷點變體結合使用，僅在中型 螢幕尺寸及以上套用此工具
<table class="border-collapse md:border-separate ..."> <!-- ... --></table>在變體文件中瞭解更多關於使用變體的資訊。
