发表新帖
发表新帖

How to style each table cell in a column via CSS?

前端 未结
关注
6 957
慢半拍i
慢半拍i 2020-12-13 08:22

I have an ordinary HTML table: 


              相关标签:
       

        

          6条回答        


        
    
                         				            
  • 
            
           
            
    
                              
                 
              
              
    
                
                  伪装坚强ぢ        
                
              
    
                            
    
                2020-12-13 08:37
              
    
            
    
            
    
                                                                       

    This is an old post.
But I had the same question.
Found this to be working:
    


    <!DOCTYPE html>
<html>
<head>
<style>
tr:nth-child(3)>td:nth-child(2){background: red;}
</style>
</head>
<table>
<tr><td></td><td>A</td><td>B</td><td>C</td></tr>
<tr><td>1</td><td>A1</td><td>B1</td><td>C1</td></tr>
<tr><td>2</td><td>A2</td><td>B2</td><td>C2</td></tr>
<tr><td>3</td><td>A3</td><td>B3</td><td>C3</td></tr>
</table>
</html>

    


    This style setting sets the background color to red in the third row and second column,
    
                                                                        
    
                                                        
    
            
    
            
    
              
                
                0
              
                 
                
               讨论(0)
              
              
                                                   
              
    
                                                            
    
            
    
                      
          
    • 
          	          
  • 
            
           
            
    
                              
                 
              
              
    
                
                  生来不讨喜        
                
              
    
                            
    
                2020-12-13 08:38
              
    
            
    
            
    
                                                                       

    Use the <col> tag and style it following this guide. This way you only need to add a class (or inline style specification) to the <col> element instead of each <td> in the table.
    


    Caveats:
    


      

    • Any row or cell styling will supersede column styling.
      • 

    • The <col> tag only supports styling border, background, width and visibility (and their derivatives, such as background-color).
      • 

    • The border declaration does not work unless the <table> has border-collapse: collapse;, and the behavior is inconsistent between browsers.
      • 

    • The visibility declaration does not work properly in Chrome due to a known bug.
      • 

    
                                                                        
    
                                                        
    
            
    
            
    
              
                
                0
              
                 
                
               讨论(0)
              
              
                                                   
              
    
                                                            
    
            
    
                      
          
    • 
          	          
  • 
            
           
            
    
                              
                 
              
              
    
                
                  天涯浪人        
                
              
    
                            
    
                2020-12-13 08:50
              
    
            
    
            
    
                                                                       

    Additionally to Sean Patrick Floyd's solution you can combine :first-child with the adjacent sibling selector + (also not supported by IE6):
    


    td:first-child { /* first column */ }

td:first-child + td { /* second column */ }

td:first-child + td + td { /* third column */ }

/* etc. */

    
                                                                        
    
                                                        
    
            
    
            
    
              
                
                0
              
                 
                
               讨论(0)
              
              
                                                   
              
    
                                                            
    
            
    
                      
          
    • 
          	          
  • 
            
           
            
    
                              
                 
              
              
    
                
                  花落未央        
                
              
    
                            
    
                2020-12-13 08:51
              
    
            
    
            
    
                                                                       

    The following allows you to style columns at table level, and can be used in a more general way to the previous examples, as you don't have to make assumptions about the styles applied to a given column index within the style sheet itself.
    


    I agree that the <col>  approach is best if it fits your needs, but the range of styles is very limited.
    


    The sample styles column 1, 2, & 4 with a grey text style.
    


    HTML
    


    <table class="example col1-readonly col2-readonly col4-readonly">

    


    CSS
    


    .example.col1-readonly tr td:nth-child(1),
.example.col2-readonly tr td:nth-child(2),
.example.col3-readonly tr td:nth-child(3),
.example.col4-readonly tr td:nth-child(4) {
    color:#555;
}

    
                                                                        
    
                                                        
    
            
    
            
    
              
                
                0
              
                 
                
               讨论(0)
              
              
                                                   
              
    
                                                            
    
            
    
                      
          
    • 
          	          
  • 
            
           
            
    
                              
                 
              
              
    
                
                  醉梦人生        
                
              
    
                            
    
                2020-12-13 08:56
              
    
            
    
            
    
                                                                       

    2015 answer, and based on the first-child answer but MUCH cleaner.
    


    https://developer.mozilla.org/en-US/docs/Web/CSS/%3Anth-child
    


    td:nth-child(1) { /* first column */ }
td:nth-child(2) { /* second column */ }
td:nth-child(3) { /* third column */ }

    


    Super clean code
    
                                                                        
    
                                                        
    
            
    
            
    
              
                
                0
              
                 
                
               讨论(0)
              
              
                                                   
              
    
                                                            
    
            
    
                      
          
    • 
          	          
  • 
            
           
            
    
                              
                 
              
              
    
                
                  予麋鹿        
                
              
    
                            
    
                2020-12-13 09:04
              
    
            
    
            
    
                                                                       

    Well for the first and last columns you can use the :first-child and :last-child pseudo class:
    


    /* make the first cell of every row bold */
tr td:FIRST-CHILD{
    font-weight:bold;
}

/* make the last cell of every row italic */
tr td:LAST-CHILD{
    font-style:italic;
}

    


    Reference:
    


      

    • :first-child and :last-child
      • 

    
                                                                        
    
                                                        
    
            
    
            
    
              
                
                0
              
                 
                
               讨论(0)
              
              
                                                   
              
    
                                                            
    
            
    
                      
          
    • 
          	          
                             

        
        

          

            
            

              
              

            
    


                                 
              

            

                          
    

        
         

                
                

                  
                

                

                   看不清?
                

              

                                  

                    
   
                 
             
              
提交回复

            

          
        

      

          
 
     
 

        
热议问题

            
                 

  

    FAT 
    ...