Bootstrap 表格的可选样式

除了 .table 类之外，Bootstrap还为表格提供了4个辅助类 .table-striped、.table-bordered、.table-hover 和 .table-condensed，分别用来实现带条纹背景的表格、带边框的表格、带悬停效果的表格、紧凑的表格。这 4个类之间互不排斥，可以根据需要，为一个表格应用多个类。

1、带条纹背景的表格

为

添加 .table-striped 类，就可以为 中的表格行添加条纹背景，即实现表格数据行的隔行换色效果。如：

1. class="table table-striped">
2.  

   

     

     

     

     

   

 

 

   

     

     

     

     

   

   

     

     

     

     

   

   

     

     

     

     

   

 

#	First Name	Last Name	Username
1	Mark	Otto	@mdo
2	Jacob	Thornton	@fat
3	Larry	the Bird	@twitter

效果如图 3‑23所示：

图3-23 Bootstrap带条纹背景的表格

注意：这个效果是通过 :nth-child 选择器实现的，但 IE8 及以下的版本不支持这个选择器，需要考虑兼容性处理方案。

2、带边框的表格

为

添加 .table-bordered 类，就可以为所有单元格加上边框，也同时为整个表格添加圆角边框效果。如：

1. class="table table-bordered">
2.  

   

     

     

     

     

   

 

 

   

      rowspan="2">1

     

     

     

   

   

     

     

     

   

   

     

     

     

     

   

   

     

      colspan="2">Larry the Bird

     

   

 

#	First Name	Last Name	Username
Mark	Otto	@mdo
Mark	Otto	@TwBootstrap
2	Jacob	Thornton	@fat
3	@twitter

效果如图 3‑24所示：

图3-24 Boostrap带边框的表格

3、带悬停效果的表格

为

添加 .table-hover 类，就可以为表格的数据行添加鼠标悬停效果。当鼠标经过数据行时，会为该行添加浅灰色背景。如：

1. class="table table-hover">
2.  

   

     

     

     

     

   

 

 

   

     

     

     

     

   

   

     

     

     

     

   

   

     

      colspan="2">Larry the Bird

     

   

 

#	First Name	Last Name	Username
1	Mark	Otto	@mdo
2	Jacob	Thornton	@fat
3	@twitter

效果如图 3‑25所示：

图3-25 Boostrap带悬停修改的表格

4、紧凑的表格

为

添加 .table-condensed 类，所有单元格的 padding 都会减半（从8px减到4px），让表格更加紧凑。这种样式适合信息密集的情况。如：

1. class="table table-condensed">
2.  

   

     

     

     

     

   

 

 

   

     

     

     

     

   

   

     

     

     

     

   

   

     

      colspan="2">Larry the Bird

     

   

 

#	First Name	Last Name	Username
1	Mark	Otto	@mdo
2	Jacob	Thornton	@fat
3	@twitter

效果如图 3‑26所示：

图3-26 Boostrap紧凑的表格

关于作者

歪脖先生，十五年以上软件开发经验，酷爱Web开发，精通 HTML、CSS、JavaScript、jQuery、JSON、Python、Less、Bootstrap等，著有《HTML宝典》、《揭秘CSS》、《Less简明教程》、《JSON教程》、《Bootstrap2用户指南》、《Bootstrap3实用教程》，并全部在 GitHub 上开源。