2-23 表格--紧凑型表格
本节编程练习不计算学习进度,请电脑登录imooc.com操作

表格--紧凑型表格

何谓紧凑型表格,简单理解,就是单元格没内距或者内距较其他表格的内距更小。换句话说,要实现紧凑型表格只需要重置表格单元格的内距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行输入正确代码,制作一个紧凑型表格。

  1. <!DOCTYPE HTML>
  2. <html>
  3. <head>
  4. <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
  5. <title>紧凑型表格</title>
  6. <link rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css">
  7. </head>
  8.  
  9. <body>
  10. <table class="table">
  11. <thead>
  12. <tr>
  13. <th>表格标题</th>
  14. <th>表格标题</th>
  15. <th>表格标题</th>
  16. </tr>
  17. </thead>
  18. <tbody>
  19. <tr>
  20. <td>表格单元格</td>
  21. <td>表格单元格</td>
  22. <td>表格单元格</td>
  23. </tr>
  24. <tr>
  25. <td>表格单元格</td>
  26. <td>表格单元格</td>
  27. <td>表格单元格</td>
  28. </tr>
  29. <tr>
  30. <td>表格单元格</td>
  31. <td>表格单元格</td>
  32. <td>表格单元格</td>
  33. </tr>
  34. <tr>
  35. <td>表格单元格</td>
  36. <td>表格单元格</td>
  37. <td>表格单元格</td>
  38. </tr>
  39. </tbody>
  40. </table>
  41. </body>
  42. </html>
  1. body{padding:20px;}
下一节