发表新帖
发表新帖

Lock table cells to their default size regardless of content

前端 未结
关注
8 2046
栀梦
栀梦 2021-01-02 13:25

If I have

Together with the following CSS, so that the size of the image doesn't affect the size of the cell which contains it:
div.bigimg
{
    height: 100%;
    width: 100%;
    position: relative;
}
div.bigimg > img
{
    position: absolute;
    top: 0;
    left: 0;
}

I set the height and width of div.bigimg to 100% to match the size of the td which contains it, because I'm using JavaScript to resize the images at run time to fit their containers, which are the div.bigimg.
Here's another example, using text instead of images -- same principle though, i.e. position: absolute inside position: relative inside each cell and the cells don't fit the content.

                                                        

              
                
                0
              
                   
                
               讨论(0)
              
                                                  
              
              

                          
             
       
          
              

                                       




            

          

            
            

              
              

            
    


                                 
              

            

                          
    

        
         

                
                

                  
                

                

                   看不清?
                

              

                                  

                    
   
                 
             
              
提交回复

            

          
        

          
 
     
 

        
热议问题

            
                 

    

        
        
    

    

                 


        
      
      
      

        

          8条回答        


        
    
                    
  • 
            
            
    
                         
                 [愿得一人] 
              
              
    
                
                   [愿得一人]
                                             
                
                
                (楼主)
            
              
                  
    
                2021-01-02 13:50
              
    

            
    
            
    
              
              

    You can do it by using position: absolute on the content of each table cell: because if you do then the size of the content doesn't affect the size of the cell.
    


    To do this, you must then also position the table cells (so that absolute positioning of the content is relative to the table cell) -- and/or, to support Firefox, position an extra div within the table cells since Firefox doesn't let you apply position to the cells themselves.
    


    For example, I'm using this HTML: