亚洲在线久爱草,狠狠天天香蕉网,天天搞日日干久草,伊人亚洲日本欧美

章節
問答
課簽
筆記
評論
占位
占位

表格--緊湊型表格

何謂緊湊型表格,簡單理解,就是單元格沒內距或者內距較其他表格的內距更小。換句話說,要實現緊湊型表格只需要重置表格單元格的內距padding的值。那么在Bootstrap中,通過類名“table-condensed”重置了單元格內距值。
緊湊型表格的運用,也只是需要在<table class="table">基礎上添加類名“table-condensed”:

<table class="table table-condensed">
…
</table>

效果圖如下:

從上面效果圖可以看出,Bootstrap中緊湊型的表格與基礎表格差別不大,因為只是將單元格的內距由8px調至5px。

源碼請查看bootstrap.css文件第1442行~第1449行:

.table-condensed > thead > tr > th,
.table-condensed > tbody > tr > th,
.table-condensed > tfoot > tr > th,
.table-condensed > thead > tr > td,
.table-condensed > tbody > tr > td,
.table-condensed > tfoot > tr > td {
padding: 5px;
}

正如上一小節中懸浮高亮表格中所講解的,在Bootstrap中制作表格中,可以將上面幾種表格樣式結合在一起使用,從而制作出更為精美的表格。結合的方法也很簡單,就是在<table class="table">基礎上添加你需要的表格樣式類型。

另外從上面的示例中大家可能也發現了,不管制作哪種表格都離不開類名“table”。所以大家在使用Bootstrap表格時,千萬注意,你的<table>元素中一定不能缺少類名“table”。

任務

我也來試試:完成下面任務

在右側代碼編輯器第10行輸入正確代碼,制作一個緊湊型表格。

?不會了怎么辦

正確代碼如下:

<table class="table table-condensed">
…
</table>
||

提問題

寫筆記

公開筆記
提交
||

請驗證,完成請求

由于請求次數過多,請先驗證,完成再次請求

加群二維碼

打開微信掃碼自動綁定

您還未綁定服務號

綁定后可得到

  • · 粉絲專屬優惠福利
  • · 大咖直播交流干貨
  • · 課程更新,問題答復提醒
  • · 賬號支付安全提醒

收藏課程后,能更快找到我哦~

使用 Ctrl+D 可將課程添加到書簽

邀請您關注公眾號
關注后,及時獲悉本課程動態

舉報

0/150
提交
取消
全部 精華 我要發布
全部 我要發布
最熱 最新
只看我的

手記推薦

更多

本次提問將花費2個積分

你的積分不足,無法發表

為什么扣積分?

本次提問將花費2個積分

繼續發表請點擊 "確定"

為什么扣積分?