基礎表格僅讓表格部分地方有邊框，但有時候需要整個表格具有邊框效果。Bootstrap出于實際運用，也考慮這種表格效果，即所有單元格具有一條1px的邊框。
Bootstrap中帶邊框的表格使用方法和斑馬線表格的使用方法類似，只需要在基礎表格<table class="table">基礎上添加一個“.table-bordered”類名即可：
<table class="table table-bordered"> … </table>
樣式如下圖所示：
其源碼可以查看bootstrap.css文件第1450行~第1464行：
.table-bordered {
border: 1px solid #ddd;/*整個表格設置邊框*/
}
.table-bordered > thead > tr > th,
.table-bordered > tbody > tr > th,
.table-bordered > tfoot > tr > th,
.table-bordered > thead > tr > td,
.table-bordered > tbody > tr > td,
.table-bordered > tfoot > tr > td {
border: 1px solid #ddd; /*每個單元格設置邊框*/
}
.table-bordered > thead > tr > th,
.table-bordered > thead > tr > td {
border-bottom-width: 2px;/*表頭底部邊框*/
}
我也來試試：完成下面任務
在右側代碼編輯器第10行補充正確代碼，制作一個帶邊框的表格，如下所示：
正確代碼如下：
<table class="table table-bordered"> ... </table>
請驗證，完成請求
由于請求次數過多，請先驗證，完成再次請求
打開微信掃碼自動綁定
綁定后可得到
使用 Ctrl+D 可將課程添加到書簽
舉報