HTML table colgroup element not working?

Question

I want different styles on each column of a table. I\'ve read that you could do that by using or , but I had no luck. I

Answer 1

Here is a trick I used which actually worked well. In an generic (site wide) css file I put:

.mytable td:nth-child(1) { width: var(--w1);}
.mytable td:nth-child(2) { width: var(--w2);}
.mytable td:nth-child(3) { width: var(--w3);}
.mytable td:nth-child(4) { width: var(--w4);}

and so on up to whatever I felt was the maximum number of columns in any table I would ever need on my site.

Then on each table I could define the width with a style such as:

This made it easy to set the column widths plus I could add code to resize the columns which simply had to change the style property on the table for the desired column.  This avoided having to make numerous CCS entries every time I wanted to define the column widths for a table.  To change a column width you could use something like this:
document.getElementById("tbl1").style.setProperty("--w2", "123px");
The above simply changes the width of column 2 by changing the --w2 variable value.

                                                        

              
                
                0
              
                   
                
               讨论(0)
              
                                                  
              
              

                          
             
       
          
              
                                       

     查看其它7个回答


            

                    



               
            

    发布评论:
    

         
                        
    
    
提交评论 
  
  

                    
                    

                    

                        

                        
                         加载中...
                        
                    
                

          

            
            

              
              

            
    


                                 
              
            
                          
    

        
         

                验证码
                

                  
                
                

                   看不清?
                
              
                                  

                    
   
                 
             
              
提交回复
            
          
        

          
 
     
 

        
热议问题