3.4.1　基础样式

只需要在table元素上应用.table样式即可制作出比较漂亮的表格。示例如下：

  1. <table class="table">
  2.    ...
  3. </table>

运行效果如图3-12所示。

3.4.1　基础样式 - 图1 图3-12　基础表格运行效果

.table样式的主要作用有3个：增加单元格的内边距、在thead的底部设置一条2像素的粗线，以及在每行记录的顶部都有1条1个像素的细线。主要源码如下：

  1. // 源码1401行
  2. table {  max-width: 100%;  background-color: transparent;}
  3. th {  text-align: left;}
  4. .table {  width: 100%;  margin-bottom: 20px;}
  5. .table > thead > tr > th,
  6. .table > tbody > tr > th,
  7. .table > tfoot > tr > th,
  8. .table > thead > tr > td,
  9. .table > tbody > tr > td,
  10. .table > tfoot > tr > td {
  11.   padding: 8px;                         /*设置单元格的内边距*/
  12.   line-height: 1.428571429;
  13.   vertical-align: top;
  14.   border-top: 1px solid #ddd;           /* 每行记录的顶部都有1条1个像素宽的横线 */
  15. }
  16. .table > thead > tr > th {
  17.   vertical-align: bottom;
  18.   border-bottom: 2px solid #ddd;        /* thead有1条2个像素宽的横线 */
  19. }
  20. /*省略部分样式*/
  21. .table > tbody + tbody {
  22.   border-top: 2px solid #ddd;
  23.                                 /* 如果表格里有2个tbody,两者之间也会有1条2个像素宽的横线 */
  24. }