大锅烩~ 连起来比对效果，多少能看出一些差距。

    
         
     
              
      
                   
       1、无效果的table            
       
        1                    
       
       
                        
                           
                              
                    
                    
                    
                  
                
                
                           
                              
                    
                    
                  
                
              
        
         
          
#
          
First Name
          
Last Name
          
Username
         
        
        
         
          
Mark
          
Otto
          
@mdo
         
        
       
                
       
                    
        2、BS提供的.table类 |class="table"            
        
                                                               #                    First Name                    Last Name                    Username                                                                                        
         
          1                    Mark                    Otto                    @mdo                                                                
          
                       
           3、反相表格.table-inverse | class="table table-inverse"            
           
                                                                  #                    First Name                    Last Name                    Username                                                                                        
            
             1                    Mark                    Otto                    @mdo                                                                
             
                          
              4、反相表格.table-inverse | class="table table-inverse"            
              
                               
               
                                                      #                    First Name                    Last Name                    Username                                                  
                
                                                       1                    Mark                    Otto                    @mdo                                                                
                 
                              
                  5、隔行变色 .table-striped | class="table table-striped"            
                  
                                                                         #                    First Name                    Last Name                    Username                                                                                        1                    Mark                    Otto                    @mdo                                                        1                    Mark                    Otto                    @mdo                                                        1                    Mark                    Otto                    @mdo                                                                
                   
                                
                    6、带边框的表格 .table-bordered | class="table table-bordered"            
                    
                                                                           #                    First Name                    Last Name                    Username                                                                                        1                    Mark                    Otto                    @mdo                                                                
                     
                                  
                      7、可悬停的行 .table-hover | class="table table-hover"            
                      
                                                                             #                    First Name                    Last Name                    Username                                                                                        1                    Mark                    Otto                    @mdo                                                                
                       
                                    
                        8、紧凑型的表 .table-sm | class="table table-sm"            
                        
                                                                               #                    First Name                    Last Name                    Username                                                                                        1                    Mark                    Otto                    @mdo                                                        1                    Mark                    Otto                    @mdo                                                                
                         
                                      
                          9、上线文类 《tr class="table-active"》            
                          
                                                                                 0                    将条形码放置《tr》中                                                                     
                           
                                                1                    class="table-active"                                    
                            
                                                 2                    class="table-success"                                    
                             
                                                  3                    class="table-warning"                                    
                              
                                                   4                    class="table-danger"                                    
                               
                                                    5                    class="table-info"                                                                
                                
                                             
                                 10、上线文类 《td class="table-active"》            
                                 
                                                                                        0                    将条形码放置《td》中                     0                    0                    0                                                                                          
                                  
                                   td class="table-active"                      
                                   
                                    td class="table-success"                      
                                    
                                     td class="table-warning"                      
                                     
                                      td class="table-danger"                      
                                      
                                       td class="table-info"                                                                
                                       
                                                    
                                        11、响应式表格 .table-responsive | 加在table外层div中            
                                        
                                                         
                                         
                                                                                                            
                                          
                                           #                        如果窗体宽度小于768PX，                        则在table中加入横向滚动条                        如果窗体宽度小于768PX，                        则在table中加入横向滚动条                        如果窗体宽度小于768PX，                        则在table中加入横向滚动条                        如果窗体宽度小于768PX，                        则在table中加入横向滚动条                                                                                                            
                                           
                                            1                        成功                        则在table中加入横向滚动条                        如果窗体宽度小于768PX，                        则在table中加入横向滚动条                        如果窗体宽度小于768PX，                        则在table中加入横向滚动条                        如果窗体宽度小于768PX，                        则在table中加入横向滚动条                                                                                        
                                            
                                                         
                                             12、表格转秩 .table-reflow | class="table table-reflow"             
                                             
                                                                                                    #.table-reflowa                    我是第一个TR的第2个td                    我是第一个TR的第3个td                    我是第一个TR的第4个td                    我是第一个TR的第5个td                    我是第一个TR的第6个td                                                                                        
                                              
                                               1 竖向显示表格                    我是第二个tr的第2个td                    我是第二个tr的第3个td                    我是第二个tr的第4个td                    我是第二个tr的第5个td                    我是第二个tr的第6个td