css样式-表格优化-白红宇

css样式-表格优化

阅读量：7251 次

发布时间：2019-06-29

本文共 2042 字，大约阅读时间需要 6 分钟。

1、表格的初步优化

index.html

1  2  3  4 
      5 Insert title here 6      
      7  8  9       10       
     
      11          
        12             
13             
14             
15          
16          
        17             
18             
19             
20          
21          
        22             
23             
24             
25          
26          
        27             
28             
29             
30          
31          
        32             
33             
34             
35          
36       37       
                     姓名         年龄         性别        
               小王         20         男        
               小王         20         男        
               小王         20         男        
               小王         20         男        
      
     
38 39

姓名	年龄	性别
小王	20	男
小王	20	男
小王	20	男
小王	20	男

MyCss6.css

1 #tb,tr,th,td{ 2     border: 1px solid blue; 3     text-align: center; 4     background-color: aqua; 5 } 6 #tb{ 7     width:400px; 8     height:400px; 9     border-collapse: collapse;10 }

效果：

2、表格的进一步优化：

index.html

1  2  3  4 
      5 Insert title here 6      
      7  8  9       10       
     
      11          
        12             
13             
14             
15          
16          
        17             
18             
19             
20          
21          
        22             
23             
24             
25          
26          
        27             
28             
29             
30          
31          
        32             
33             
34             
35          
36       37       
                     姓名         年龄         性别        
               小王         20         男        
               小王         20         男        
               小王         20         男        
               小王         20         男        
      
     
38 39

姓名	年龄	性别
小王	20	男
小王	20	男
小王	20	男
小王	20	男

css:

1 #tb{ 2     border-collapse: collapse; 3     width:500px; 4 } 5 #tb td,#tb th{ 6     border:1px solid bisque; 7     padding: 5px; 8 } 9 #tb th{10     text-align: right;11     background-color: aqua;12     color: #FFFFFF;13 }14 #tb tr.alt td{15     color:black;16     background-color: aquamarine;17 }

效果：