发表新帖
发表新帖

table cell width issue

前端 未结
关注
3 1361
孤街浪徒
孤街浪徒 2020-12-16 16:54

I have a table with 2 rows where i need varying cell width as 




              相关标签:
       

        

          3条回答        


        
    
                         				            
  • 
            
           
            
    
                              
                 
              
              
    
                
                  温柔的废话        
                
              
    
                            
    
                2020-12-16 17:25
              
    
            
    
            
    
                                                                       

    Actually, you can just have each tr set to display:block, and it will allow you to set different column widths for each row.
    
                                                                        
    
                                                        
    
            
    
            
    
              
                
                0
              
                 
                
               讨论(0)
              
              
                                                   
              
    
                                                            
    
            
    
                      
          
    • 
          	          
  • 
            
           
            
    
                              
                 
              
              
    
                
                  故里飘歌        
                
              
    
                            
    
                2020-12-16 17:31
              
    
            
    
            
    
                                                                       

    to do this with one table you need to introduce more columns and then get the column widths by using colspan so you can get the combined widths you require
    


    to get this to work well across browser you will possibly need to use the <col> and <colgroup> elements : http://www.w3.org/TR/html401/struct/tables.html#h-11.2.4
    


    <body bgcolor="#14B3D9">
<table width="100%" border="1" bgcolor="#ffffff">
<colgroup>
<col width="25%">
<col width="25%">
<col width="25%">
<col width="5%">
<col width="20%">
</colgroup>

    <tr>
        <td>25</td>
        <td colspan="2">50</td>
        <td colspan="2">25</td>     
    </tr>
    <tr>
        <td colspan="2">50</td>
        <td colspan="2">30</td>
        <td>20</td>
    </tr>
</table>
</body>

    
                                                                        
    
                                                        
    
            
    
            
    
              
                
                0
              
                 
                
               讨论(0)
              
              
                                                   
              
    
                                                            
    
            
    
                      
          
    • 
          	          
  • 
            
           
            
    
                              
                 
              
              
    
                
                  独厮守ぢ        
                
              
    
                            
    
                2020-12-16 17:31
              
    
            
    
            
    
                                                                       

    You can use nth:child
    


    However it will apply to all rows. This will be relative and not absolute. 
    


        tr>:nth-child(6){ 
    width: 20%;
    }
    tr>:nth-child(7){ 
    width: 80%;
    }

    
                                                                        
    
                                                        
    
            
    
            
    
              
                
                0
              
                 
                
               讨论(0)
              
              
                                                   
              
    
                                                            
    
            
    
                      
          
    • 
          	          
                             

        
        

          

            
            

              
              

            
    


                                 
              

            

                          
    

        
         

                
                

                  
                

                

                   看不清?
                

              

                                  

                    
   
                 
             
              
提交回复

            

          
        

      

          
 
     
 

        
热议问题