bootstrap表格

Bootstrap 提供了一个清晰的创建表格的布局。下表列出了 Bootstrap 支持的一些表格元素：标签     描述
     
           为表格添加基础样式。
            表格标题行的容器元素（
        ），用来标识表格列。
            表格主体中的表格行的容器元素（
        ）。
             一组出现在单行上的表格单元格的容器元素（
        内使用。
      
       
       
      
      
       
       
       
        
 或 
        
）。
        
     默认的表格单元格。
        
     特殊的表格单元格，用来标识列或行（取决于范围和位置）。必须在 
       
      
      
      
      
            关于表格存储内容的描述或总结。
      
     

1.表格类：

下表样式可用于表格中：类     描述     实例.table     为任意 
     
       添加基本样式 (只有横向分隔线)     .table-striped     在 
        内添加斑马线形式的条纹 ( IE8 不支持)     .table-bordered     为所有表格的单元格添加边框     .table-hover     在 
        内的任一行启用鼠标悬停状态     .table-condensed     让表格更加紧凑     联合使用所有表格类

2.tr,th,td类

下表的类可用于表格的行或者单元格：类     描述     实例.active     将悬停的颜色应用在行或者单元格上     .success     表示成功的操作     .info     表示信息变化的操作     .warning     表示一个警告的操作     .danger     表示一个危险的操作

3.代码示例：

     
      
      
                
        基本表的布局
       
                
                     
                          
姓名
                          
年龄
                          
qq
                          
telphone
                     
                
                
                     
                          
向明
                          
21
                          
23456754353425
3425324532458
                          
12345678
                     
                     
                          
向明
                          
21
                          
2345678
                          
1234567854756756
76654367546
                     
                     
                          
向明
                          
21
                          
2345678
                          
12345678
                     
                     
                          
向明
                          
21
                          
2345678
                          
12345678
                     
                
           
    
     

4.几点说明：

a.<div class="table-responsive"> ...</div>,是修饰响应式布局。

b.<table class="table">...</table>,是基本表，<table class="table table-striped">，<table class="table table-bordered">，

<table class="table table-hover">，<table class="table table-condensed">，<tr class="active">，<tr class="success">等等。

c.效果参看：