📌  相关文章
📜  如何设置固定宽度<td>在一张桌子上？

📅  最后修改于: 2021-08-30 09:29:54             🧑  作者: Mango

在设计网页的过程中，对表格的需求是很正常的。 HTML 提供了

标签来构造表格并定义行和列，分别使用和
标签。

默认情况下，表格中的行和列的尺寸由浏览器以适合内容的方式自动调整。但是，可能存在需要固定列宽的情况。有多种方法可以固定

标签的宽度。其中一些如下所述：

  • 使用宽度属性：
标签具有宽度属性来控制特定列的宽度。通过为该属性分配一个 0 到 100 之间的百分比数值(或者您可以使用像素格式)。我们可以将列宽限制为表格总宽度的百分比。 width 属性无效且已被拒绝，因此HTML5不再支持该属性。
html


    
        
          Set up fixed width for
        
        
        
  
        
    
    
        

         GeeksforGeeks
        

  
        
        

            
            
            
                
                    
                    
                
                
                    
                    
                
                
                    
                    
                
                
                    
                    
                
            
GfG CoursesDescription

                      DS and Algo Foundation
                    
                      Master the basics of Data Structures
                      and Algorithms to solve complex 
                      problems efficiently.
                    
Placement 100
                      This course will guide you for 
                      placement with theory,lecture videos,
                      weekly assignments, contests and doubt 
                      assistance.
                    

                      Amazon SDE Test Series
                    
                      Test your skill & give the final 
                      touch to your preparation before 
                      applying for product based against 
                      like Amazon, Microsoft, etc.
                    

        

    

html


    
        Set up fixed width for <td>
        
        
  
        
    
    
        

         GeeksforGeeks
        

  
        
        

            
            
            
                
                    
                    
                
  
                
                    
                    
                
  
                
                    
                    
                
                
                    
                    
                
            
GfG CoursesDescription
DS and Algo Foundation
                       Master the basics of Data Structures 
                       and Algorithms to solve complex 
                       problems efficiently.
                    
Placement 100
                     Test your skill & give the final touch
                     to your preparation before applying for
                     product based against like Amazon, 
                     Microsoft, etc.
                    
Amazon SDE Test Series
                     Test your skill & give the final touch 
                     to your preparation before applying for
                     product based gaints like Amazon, 
                     Microsoft, etc.
                    

        

    

html


    
        Set up fixed width for
        
        
  
        
    
    
        

         GeeksforGeeks
        

  
        
        

            
            
                
                  
                
                  
                
                    
                    
                
  
                
                    
                    
                
  
                
                    
                    
                
  
                
                    
                    
                
            



GfG CoursesDescription
DS and Algo Foundation
                      Master the basics of Data Structures
                      and Algorithms to solve complex 
                      problems efficiently.
                    
Placement 100
                      This course will guide you for 
                      placement with theory,lecture 
                      videos, weekly assignments,
                      contests and doubt assistance.
                    
Amazon SDE Test Series
                     Test your skill & give the final touch
                     to your preparation before applying for
                     product based against like Amazon, 
                     Microsoft, etc.
                    

        

    

  • 使用 CSS：层叠样式表 (CSS) 被广泛用于装饰大尺寸的网页。通过使用 CSS，HTML 元素的样式很容易修改。为了固定 td标签的宽度，第 n 个子 CSS 用于设置 table 每一行中特定列的属性(由 n 的值确定)。

html 



    
        Set up fixed width for <td>
        
        
  
        
    
    
        

         GeeksforGeeks
        

  
        
        

            
            
            
                
                    
                    
                
  
                
                    
                    
                
  
                
                    
                    
                
                
                    
                    
                
            
GfG CoursesDescription
DS and Algo Foundation
                       Master the basics of Data Structures 
                       and Algorithms to solve complex 
                       problems efficiently.
                    
Placement 100
                     Test your skill & give the final touch
                     to your preparation before applying for
                     product based against like Amazon, 
                     Microsoft, etc.
                    
Amazon SDE Test Series
                     Test your skill & give the final touch 
                     to your preparation before applying for
                     product based gaints like Amazon, 
                     Microsoft, etc.
                    

        

    
  • 使用 col 标签并固定表格布局属性：如果在表格的每一行中都遵循相同类型的列属性，那么使用col标签来定义列的属性是一个好主意。如果第一次在 HTML 文档中写入 col标签并设置了它的属性，则这些 all 属性指的是表中每行的第一列，其中提到了它。同样，第二次使用 col标签并定义其属性会影响表格每行的第二列。此外，调整列内的长文本CSS 属性table-layout:fixed;使用。下面是实现。

html 



    
        Set up fixed width for
        
        
  
        
    
    
        

         GeeksforGeeks
        

  
        
        

            
            
                
                  
                
                  
                
                    
                    
                
  
                
                    
                    
                
  
                
                    
                    
                
  
                
                    
                    
                
            



GfG CoursesDescription
DS and Algo Foundation
                      Master the basics of Data Structures
                      and Algorithms to solve complex 
                      problems efficiently.
                    
Placement 100
                      This course will guide you for 
                      placement with theory,lecture 
                      videos, weekly assignments,
                      contests and doubt assistance.
                    
Amazon SDE Test Series
                     Test your skill & give the final touch
                     to your preparation before applying for
                     product based against like Amazon, 
                     Microsoft, etc.
                    

        

    
  • 输出：每种方法的输出都相同。

具有固定列宽的表格图像，第一列宽度为 40%，第二列宽度为 60%