table中cellspacing、cellpadding的css替代写法

分手后的思念是犯贱 2024-02-17 17:24 66阅读 0赞

table
       
       
        {
         
       
       
        border
       
       
        :
       
       
        0
       
       
        ;
       
       
        margin
       
       
        :
       
       
        0
       
       
        ;
       
       
        border-collapse
       
       
        :
       
       
        collapse
       
       
        ;
       
       
        border-spacing
       
       
        :
       
       
        0
       
       
        ;
       
       
        }
       
       
        
    
       
       
        /*控制cellspacing*/
       
       
        
    table td
       
       
        {
         
       
       
        padding
       
       
        :
       
       
        0
       
       
        ;
       
       
        }
       
       
                                                                        
    
       
       
        /*控制cellpadding*/

说明：

border-collapse : separate | collapse  
separate :　 默认值。边框独立（标准HTML）   
collapse :　 相邻边被合并  
  
border-spacing : length

设置或检索当表格边框独立（例如当border-collapse属性等于separate时），行和单元格的边框在横向和纵向上的间 距。当只指定一个length值时，这个值将作用于横向和纵向上的间距。当指定了全部两个length值时，第一个作用于横向间距，第二个作用于纵向间 距。目前IE5.5尚不支持此属性。

好看的表格示例：

table{
         
       
       
        
    
       
       
        	border: solid #add9c0;
       
       
        
    
       
       
        	border-width: 1px 0 0 1px;
       
       
        
    
       
       
        	margin:0;
       
       
        
    
       
       
        	border-collapse:collapse;
       
       
        
    
       
       
        	border-spacing:0;
       
       
        
    
       
       
        }
       
       
        
    
       
       
        td{
         
       
       
        
    
       
       
        	border: solid #add9c0;
       
       
        
    
       
       
        	border-width: 0 1px 1px 0;
       
       
        
    
       
       
        	padding: 10px;
       
       
        
    
       
       
        }