📌  相关文章
📜  如何使用 CSS 创建等宽表格单元格?

📅  最后修改于: 2021-08-31 02:23:01             🧑  作者: Mango

HTML 表格是使用table 标记与后续标记(如tr 标记)的组合创建的,以在表格中创建新行。表头的th 标签和 td 标签用于定义表中的单元格。但是,表格的每个单元格默认设计为适合任何大小的内容,因此每个单元格都会根据其中的信息更改其宽度。因此,我们学习如何将单元格的宽度固定为任何大小或值。

默认情况下,HTML 单元格大小是动态的。因此,如果要在单元格中显示的内容很大,则单元格的大小会根据其中的内容而变化。但是,在某些情况下,需要固定单元大小以保持均匀性和美观。

有几种方法可以使 HTML 表格中的单元格大小固定。

使用 CSS table-layout 属性:这个属性应该用于改变表格的布局特性。默认情况下,table-layout 值为 auto。这意味着如果我们更改它以修复会影响的单元格大小,则单元格大小会根据其中的内容而变化。通过将值更改为固定,表格布局是固定的。其他行中的单元格不影响列宽。如果第一行没有宽度,则列宽。无论单元格内的内容如何,列宽在整个表格中均等划分。

下面的例子说明了上述方法:

  • 例子:
    
    
      
    
        table-layout property
        
    
      
    
        
            

    GeeksforGeeks

            
                

    Default width table cell

                                                                                                                                                                                                                                                                                                                                
    Author NameAgeCollege
    RaviPratap Singh24GFG
    Rakesh Singh25GEEKS
            

            
                

    Equal width table cell

                                                                                                                                                                                                                                                                                                                                
    Author NameAgeCollege
    RaviPratap Singh24GFG
    Rakesh Singh25GEEKS
            
        
      
  • 输出:

使用 CSS 宽度属性:通过使用此属性,我们可以定义每个单元格的宽度值。如果我们以等百分比单位设置值,那么每个单元格的宽度将相等,每次窗口大小都无关紧要。

  • 例子:
    
    
      
    
        table-layout property
        
    
      
    
        
            

    GeeksforGeeks

            
                

    Default width table cell

                                                                                                                                                                                                                                                                                                                                
    Author NameAgeCollege
    RaviPratap Singh24GFG
    Rakesh Singh25GEEKS
            

            
                

    Equal width table cell

                                                                                                                                                                                                                                                                                                                                
    Author NameAgeCollege
    RaviPratap Singh24GFG
    Rakesh Singh25GEEKS
            
        
      
  • 输出: