Make 2 tables have the same column sizes

Question

I have 2 HTML tables that are directly on top of each other. Each table has the same number of columns, but the text they contain can differ. And each table can contain many r

Answer 1

I got a similar situation fixed for my website on IE 9, Chrome 14 and FireFox 8 with following My table contain four columns, odd ones contain labels and even contains inputs. I have four tables on my page and all columns of each table are vertically aligned. Hope these steps would help

1- Download a transparent image from anywhere, probably of size 1x1 so that you can adjust its size as per your need (not sure if an image can be shrunk too by css)

2- Define your table as

    
[now rest of your columns row by row]
3- Define your css as 
.colLabel
{
    text-align:right;
    padding-right:0em;
    height:auto;
    background-image:url(Resources/Images/transparent.gif);
    background-repeat:no-repeat;
    width:8em;
}
.colField
{
    text-align:left;
    padding-right:0em;
    height:auto;
    background-image:url(Resources/Images/transparent.gif);
    background-repeat:no-repeat;
    width:20em; 
}

.formed
{
    width:90%;
    table-layout:fixed;
    padding:0;
    margin:0;
}

                                                        

              
                
                0
              
                   
                
               讨论(0)
              
                                                  
              
              

                          
             
       
          
              
                                       

     查看其它4个回答


            

                    



               
            

    发布评论:
    

         
                        
    
    
提交评论 
  
  

                    
                    

                    

                        

                        
                         加载中...
                        
                    
                

          

            
            

              
              

            
    


                                 
              
            
                          
    

        
         

                验证码
                

                  
                
                

                   看不清?
                
              
                                  

                    
   
                 
             
              
提交回复
            
          
        

          
 
     
 

        
热议问题