Bootstrap表格是Bootstrap框架中的一個(gè)重要組成部分，由一個(gè).table元素和一個(gè)或多個(gè).table-responsive元素組成，它提供了一種簡(jiǎn)單、靈活的方式來創(chuàng)建響應(yīng)式的HTML表格，具有響應(yīng)式設(shè)計(jì)和內(nèi)置樣式等特點(diǎn)。
一、例子
由于表格在日歷和日期選擇器等第三方小部件中的廣泛使用，我們將表格設(shè)計(jì)為選擇加入。只需將基類添加到任何.table<table>，然后使用自定義樣式或我們包含的各種修飾符類進(jìn)行擴(kuò)展。
所有表格樣式都在 Bootstrap 4 中繼承，任何嵌套表格的樣式都將與父表格相同。.table使用最基本的表標(biāo)記，下面是基于 Bootstrap 的表的外觀。
<table class="table"> <thead> <tr> <th scope="col">#</th> <th scope="col">First</th> <th scope="col">Last</th> <th scope="col">Handle</th> </tr> </thead> <tbody> <tr> <th scope="row">1</th> <td>Mark</td> <td>Otto</td> <td>@mdo</td> </tr> <tr> <th scope="row">2</th> <td>Jacob</td> <td>Thornton</td> <td>@fat</td> </tr> <tr> <th scope="row">3</th> <td>Larry</td> <td>the Bird</td> <td>@twitter</td> </tr> </tbody> </table>
還可以使用.table-dark反轉(zhuǎn)顏色（在深色背景上使用淺色文本）。
<table class="table table-dark"> <thead> <tr> <th scope="col">#</th> <th scope="col">First</th> <th scope="col">Last</th> <th scope="col">Handle</th> </tr> </thead> <tbody> <tr> <th scope="row">1</th> <td>Mark</td> <td>Otto</td> <td>@mdo</td> </tr> <tr> <th scope="row">2</th> <td>Jacob</td> <td>Thornton</td> <td>@fat</td> </tr> <tr> <th scope="row">3</th> <td>Larry</td> <td>the Bird</td> <td>@twitter</td> </tr> </tbody> </table>
二、表頭選項(xiàng)
類似于表格和深色表格，可以使用修飾符類或使<thead>元素顯示為淺灰色或深灰色。例如，使用.thead-light和.thead-dark修飾符類分別將表頭顯示為淺灰色和深灰色。
<table class="table"> <thead class="thead-dark"> <tr> <th scope="col">#</th> <th scope="col">First</th> <th scope="col">Last</th> <th scope="col">Handle</th> </tr> </thead> <tbody> <tr> <th scope="row">1</th> <td>Mark</td> <td>Otto</td> <td>@mdo</td> </tr> <tr> <th scope="row">2</th> <td>Jacob</td> <td>Thornton</td> <td>@fat</td> </tr> <tr> <th scope="row">3</th> <td>Larry</td> <td>the Bird</td> <td>@twitter</td> </tr> </tbody> </table> <table class="table"> <thead class="thead-light"> <tr> <th scope="col">#</th> <th scope="col">First</th> <th scope="col">Last</th> <th scope="col">Handle</th> </tr> </thead> <tbody> <tr> <th scope="row">1</th> <td>Mark</td> <td>Otto</td> <td>@mdo</td> </tr> <tr> <th scope="row">2</th> <td>Jacob</td> <td>Thornton</td> <td>@fat</td> </tr> <tr> <th scope="row">3</th> <td>Larry</td> <td>the Bird</td> <td>@twitter</td> </tr> </tbody> </table>
三、條紋行
用于將斑馬線條帶添加到.table-striped<tbody>中的任何表格行。
<table class="table table-striped"> <thead> <tr> <th scope="col">#</th> <th scope="col">First</th> <th scope="col">Last</th> <th scope="col">Handle</th> </tr> </thead> <tbody> <tr> <th scope="row">1</th> <td>Mark</td> <td>Otto</td> <td>@mdo</td> </tr> <tr> <th scope="row">2</th> <td>Jacob</td> <td>Thornton</td> <td>@fat</td> </tr> <tr> <th scope="row">3</th> <td>Larry</td> <td>the Bird</td> <td>@twitter</td> </tr> </tbody> </table>
<table class="table table-striped table-dark"> <thead> <tr> <th scope="col">#</th> <th scope="col">First</th> <th scope="col">Last</th> <th scope="col">Handle</th> </tr> </thead> <tbody> <tr> <th scope="row">1</th> <td>Mark</td> <td>Otto</td> <td>@mdo</td> </tr> <tr> <th scope="row">2</th> <td>Jacob</td> <td>Thornton</td> <td>@fat</td> </tr> <tr> <th scope="row">3</th> <td>Larry</td> <td>the Bird</td> <td>@twitter</td> </tr> </tbody> </table>
四、添加表邊框
.table-bordered用來添加表格和單元格所有邊的邊框。
<table class="table table-bordered"> <thead> <tr> <th scope="col">#</th> <th scope="col">First</th> <th scope="col">Last</th> <th scope="col">Handle</th> </tr> </thead> <tbody> <tr> <th scope="row">1</th> <td>Mark</td> <td>Otto</td> <td>@mdo</td> </tr> <tr> <th scope="row">2</th> <td>Jacob</td> <td>Thornton</td> <td>@fat</td> </tr> <tr> <th scope="row">3</th> <td colspan="2">Larry the Bird</td> <td>@twitter</td> </tr> </tbody> </table>
<table class="table table-bordered table-dark"> <thead> <tr> <th scope="col">#</th> <th scope="col">First</th> <th scope="col">Last</th> <th scope="col">Handle</th> </tr> </thead> <tbody> <tr> <th scope="row">1</th> <td>Mark</td> <td>Otto</td> <td>@mdo</td> </tr> <tr> <th scope="row">2</th> <td>Jacob</td> <td>Thornton</td> <td>@fat</td> </tr> <tr> <th scope="row">3</th> <td colspan="2">Larry the Bird</td> <td>@twitter</td> </tr> </tbody> </table>
五、無邊框表
.table-borderless可添加無邊框表。
<table class="table table-borderless"> <thead> <tr> <th scope="col">#</th> <th scope="col">First</th> <th scope="col">Last</th> <th scope="col">Handle</th> </tr> </thead> <tbody> <tr> <th scope="row">1</th> <td>Mark</td> <td>Otto</td> <td>@mdo</td> </tr> <tr> <th scope="row">2</th> <td>Jacob</td> <td>Thornton</td> <td>@fat</td> </tr> <tr> <th scope="row">3</th> <td colspan="2">Larry the Bird</td> <td>@twitter</td> </tr> </tbody> </table>
.table-borderless也可用于深色背景。
<table class="table table-borderless table-dark"> <thead> <tr> <th scope="col">#</th> <th scope="col">First</th> <th scope="col">Last</th> <th scope="col">Handle</th> </tr> </thead> <tbody> <tr> <th scope="row">1</th> <td>Mark</td> <td>Otto</td> <td>@mdo</td> </tr> <tr> <th scope="row">2</th> <td>Jacob</td> <td>Thornton</td> <td>@fat</td> </tr> <tr> <th scope="row">3</th> <td colspan="2">Larry the Bird</td> <td>@twitter</td> </tr> </tbody> </table>
六、可懸停的行
添加以啟用.table-hover<tbody>。
<table class="table table-hover"> <thead> <tr> <th scope="col">#</th> <th scope="col">First</th> <th scope="col">Last</th> <th scope="col">Handle</th> </tr> </thead> <tbody> <tr> <th scope="row">1</th> <td>Mark</td> <td>Otto</td> <td>@mdo</td> </tr> <tr> <th scope="row">2</th> <td>Jacob</td> <td>Thornton</td> <td>@fat</td> </tr> <tr> <th scope="row">3</th> <td colspan="2">Larry the Bird</td> <td>@twitter</td> </tr> </tbody> </table>
<table class="table table-hover table-dark"> <thead> <tr> <th scope="col">#</th> <th scope="col">First</th> <th scope="col">Last</th> <th scope="col">Handle</th> </tr> </thead> <tbody> <tr> <th scope="row">1</th> <td>Mark</td> <td>Otto</td> <td>@mdo</td> </tr> <tr> <th scope="row">2</th> <td>Jacob</td> <td>Thornton</td> <td>@fat</td> </tr> <tr> <th scope="row">3</th> <td colspan="2">Larry the Bird</td> <td>@twitter</td> </tr> </tbody> </table>
七、緊湊表
使用.table-sm將單元格填充切成兩半來添加以使表格更緊湊。
<table class="table table-sm"> <thead> <tr> <th scope="col">#</th> <th scope="col">First</th> <th scope="col">Last</th> <th scope="col">Handle</th> </tr> </thead> <tbody> <tr> <th scope="row">1</th> <td>Mark</td> <td>Otto</td> <td>@mdo</td> </tr> <tr> <th scope="row">2</th> <td>Jacob</td> <td>Thornton</td> <td>@fat</td> </tr> <tr> <th scope="row">3</th> <td colspan="2">Larry the Bird</td> <td>@twitter</td> </tr> </tbody> </table>
<table class="table table-sm table-dark"> <thead> <tr> <th scope="col">#</th> <th scope="col">First</th> <th scope="col">Last</th> <th scope="col">Handle</th> </tr> </thead> <tbody> <tr> <th scope="row">1</th> <td>Mark</td> <td>Otto</td> <td>@mdo</td> </tr> <tr> <th scope="row">2</th> <td>Jacob</td> <td>Thornton</td> <td>@fat</td> </tr> <tr> <th scope="row">3</th> <td colspan="2">Larry the Bird</td> <td>@twitter</td> </tr> </tbody> </table>
八、上下文類
使用上下文類為表格行或單個(gè)單元格著色。
<!-- On rows --> <tr class="table-active">...</tr> <tr class="table-primary">...</tr> <tr class="table-secondary">...</tr> <tr class="table-success">...</tr> <tr class="table-danger">...</tr> <tr class="table-warning">...</tr> <tr class="table-info">...</tr> <tr class="table-light">...</tr> <tr class="table-dark">...</tr> <!-- On cells (`td` or `th`) --> <tr> <td class="table-active">...</td> <td class="table-primary">...</td> <td class="table-secondary">...</td> <td class="table-success">...</td> <td class="table-danger">...</td> <td class="table-warning">...</td> <td class="table-info">...</td> <td class="table-light">...</td> <td class="table-dark">...</td> </tr>
常規(guī)表格背景變體不適用于深色表格，但是，可以使用文本或背景實(shí)用程序來實(shí)現(xiàn)類似的樣式。
<!-- On rows --> <tr class="bg-primary">...</tr> <tr class="bg-success">...</tr> <tr class="bg-warning">...</tr> <tr class="bg-danger">...</tr> <tr class="bg-info">...</tr> <!-- On cells (`td` or `th`) --> <tr> <td class="bg-primary">...</td> <td class="bg-success">...</td> <td class="bg-warning">...</td> <td class="bg-danger">...</td> <td class="bg-info">...</td> </tr>
.table.table-responsive{-sm|-md|-lg|-xl}max-width 將 any 與 括起來來創(chuàng)建響應(yīng)式表格，使表格在最多（但不包括）576px、768px、992px 和 1120px 的每個(gè)斷點(diǎn)處水平滾動(dòng)。
注意：由于瀏覽器目前不支持范圍上下文查詢，因此我們通過使用具有更高精度的值進(jìn)行這些比較，解決了最小和最大前綴以及具有小數(shù)寬度的視口的限制（例如，在高 dpi 設(shè)備上的某些條件下可能會(huì)發(fā)生這種情況）。
九、字幕
<caption>的功能類似于表的標(biāo)題。它可以幫助使用屏幕閱讀器的用戶找到一個(gè)表格，了解它是關(guān)于什么的，并決定他們是否要閱讀它。
<table class="table"> <caption>List of users</caption> <thead> <tr> <th scope="col">#</th> <th scope="col">First</th> <th scope="col">Last</th> <th scope="col">Handle</th> </tr> </thead> <tbody> <tr> <th scope="row">1</th> <td>Mark</td> <td>Otto</td> <td>@mdo</td> </tr> <tr> <th scope="row">2</th> <td>Jacob</td> <td>Thornton</td> <td>@fat</td> </tr> <tr> <th scope="row">3</th> <td>Larry</td> <td>the Bird</td> <td>@twitter</td> </tr> </tbody> </table>
十、響應(yīng)式表格
響應(yīng)式表格允許您輕松地在水平方向上滾動(dòng)表格。您可以使用.table包裝器使任何表格在所有視口中都具有響應(yīng)性，或者使用.table-responsive選擇最大斷點(diǎn)，以使響應(yīng)式表在該斷點(diǎn)處生效。此外，還可以使用.table-responsive{-sm|-md|-lg|-xl}修飾符類來指定不同屏幕尺寸下的樣式。
1、垂直剪裁/截?cái)?/strong>
響應(yīng)式表格利用了CSS的overflow-y屬性，它可以剪掉超出表格底部或頂部邊緣的任何內(nèi)容。特別是，這可以剪掉下拉菜單和其他第三方小部件。通過將overflow-y設(shè)置為hidden，可以確保表格在滾動(dòng)時(shí)不會(huì)顯示這些額外的內(nèi)容。
2、始終響應(yīng)
在每個(gè)斷點(diǎn)中，.table-responsive用于水平滾動(dòng)表。
<div class="table-responsive"> <table class="table"> ... </table> </div>
3、特定于斷點(diǎn)
根據(jù)需要使用.table-responsive{-sm|-md|-lg|-xl}以創(chuàng)建響應(yīng)式表，直到特定斷點(diǎn)。從該斷點(diǎn)開始，表將正常運(yùn)行，不會(huì)水平滾動(dòng)。
注意：這些表可能會(huì)顯示為損壞，直到它們的響應(yīng)樣式應(yīng)用于特定的視口寬度。
<div class="table-responsive-sm"> <table class="table"> ... </table> </div> <div class="table-responsive-md"> <table class="table"> ... </table> </div> <div class="table-responsive-lg"> <table class="table"> ... </table> </div> <div class="table-responsive-xl"> <table class="table"> ... </table> </div>
