由於在<table>日曆和日期選擇器等第三方小部件中廣泛使用元素,Bootstrap 的表格是可選的。將基類添加.table到 any <table>,然後使用我們的可選修飾符類或自定義樣式進行擴展。Bootstrap 中不會繼承所有表格樣式,這意味著任何嵌套表格都可以獨立於父表格進行樣式設置。
使用最基本的表格標記,這是.table基於 - 的表格在 Bootstrap 中的外觀。
#
第一的
最後的
處理
1
標記
奧托
@mdo
2
雅各布
桑頓
@胖的
3
拉里小鳥
@推特
<tableclass="table"><thead><tr><thscope="col">#</th><thscope="col">First</th><thscope="col">Last</th><thscope="col">Handle</th></tr></thead><tbody><tr><thscope="row">1</th><td>Mark</td><td>Otto</td><td>@mdo</td></tr><tr><thscope="row">2</th><td>Jacob</td><td>Thornton</td><td>@fat</td></tr><tr><thscope="row">3</th><tdcolspan="2">Larry the Bird</td><td>@twitter</td></tr></tbody></table>
變體
使用上下文類為表格、表格行或單個單元格著色。
班級
標題
標題
默認
細胞
細胞
基本的
細胞
細胞
中學
細胞
細胞
成功
細胞
細胞
危險
細胞
細胞
警告
細胞
細胞
信息
細胞
細胞
光
細胞
細胞
黑暗的
細胞
細胞
<!-- On tables --><tableclass="table-primary">...</table><tableclass="table-secondary">...</table><tableclass="table-success">...</table><tableclass="table-danger">...</table><tableclass="table-warning">...</table><tableclass="table-info">...</table><tableclass="table-light">...</table><tableclass="table-dark">...</table><!-- On rows --><trclass="table-primary">...</tr><trclass="table-secondary">...</tr><trclass="table-success">...</tr><trclass="table-danger">...</tr><trclass="table-warning">...</tr><trclass="table-info">...</tr><trclass="table-light">...</tr><trclass="table-dark">...</tr><!-- On cells (`td` or `th`) --><tr><tdclass="table-primary">...</td><tdclass="table-secondary">...</td><tdclass="table-success">...</td><tdclass="table-danger">...</td><tdclass="table-warning">...</td><tdclass="table-info">...</td><tdclass="table-light">...</td><tdclass="table-dark">...</td></tr>
<divclass="table-responsive"><tableclass="table align-middle"><thead><tr>
...
</tr></thead><tbody><tr>
...
</tr><trclass="align-bottom">
...
</tr><tr><td>...</td><td>...</td><tdclass="align-top">This cell is aligned to the top.</td><td>...</td></tr></tbody></table></div>
A 的<caption>功能類似於表格的標題。它可以幫助使用屏幕閱讀器的用戶找到一個表格並了解它的內容並決定他們是否要閱讀它。
用戶列表
#
第一的
最後的
處理
1
標記
奧托
@mdo
2
雅各布
桑頓
@胖的
3
拉里小鳥
@推特
<tableclass="table table-sm"><caption>List of users</caption><thead>
...
</thead><tbody>
...
</tbody></table>
您也可以使用 將 放在<caption>桌子的頂部.caption-top。
用戶列表
#
第一的
最後的
處理
1
標記
奧托
@mdo
2
雅各布
桑頓
@胖的
3
拉里
鳥
@推特
<tableclass="table caption-top"><caption>List of users</caption><thead><tr><thscope="col">#</th><thscope="col">First</th><thscope="col">Last</th><thscope="col">Handle</th></tr></thead><tbody><tr><thscope="row">1</th><td>Mark</td><td>Otto</td><td>@mdo</td></tr><tr><thscope="row">2</th><td>Jacob</td><td>Thornton</td><td>@fat</td></tr><tr><thscope="row">3</th><td>Larry</td><td>the Bird</td><td>@twitter</td></tr></tbody></table>
響應式表
響應式表格允許表格輕鬆水平滾動。通過將 a 包裹起來,使任何表格在所有視口中都具有響應.table性.table-responsive。或者,選擇一個最大斷點,通過使用.table-responsive{-sm|-md|-lg|-xl|-xxl}.