📜  如何固定表格中的列宽?

📅  最后修改于: 2021-08-29 12:31:35             🧑  作者: Mango

我们已经看过文章,如何固定表格中的行高

表格中列的宽度即td可以很容易地固定。这可以通过在 标签中添加宽度属性来完成。如果不指定宽度,则列的宽度会根据内容的变化而变化。列的宽度规格可以以像素或百分比为单位。

句法:

方法:

  • width属性用于设置列的宽度。它被添加到 标签中。
  • 宽度应根据内容指定,以像素或百分比为单位。
  • 如果列中的内容很大,就会溢出。

例1:本例中,第一列的宽度是固定的,但其他列的宽度不固定。所以,当我们改变屏幕的大小时,第一列的宽度保持不变,但另一列的宽度根据内容而变化。但是,如果根据内容指定的宽度不够大,这可能不起作用,第一列将溢出并与另一列类似。

HTML


  

    

  

    
        

GeeksforGeeks

           

            To fix the width of              columns in the table         

                                                                                                                                                                                                                                                                                                                                                                                                                     
Col1Col2Col3
                    Width of this column remains                      same on varying screen-size                                      Width of this column changes                      on varying screen-size                                      Width of this column also changes                      on varying screen-size                 
Geek1Geek2Geek3
Geek4Geek5Geek6
Geek7Geek8Geek9
    
  


HTML


  

    

  

    
        

GeeksforGeeks

           

            To fix the width of             columns in the table         

                                                                                                                                                                                                                                                                                                                                                                                                                     
Col1Col2Col3
                    Width of this column remains                      same on varying screen-size                                      Width of this column changes                      on varying screen-size                                      Width of this column also changes                      on varying screen-size                 
Geek1Geek2Geek3
Geek4Geek5Geek6
Geek7Geek8Geek9
    
  


输出:运行以下代码并更改屏幕大小以查看列之间的差异。

  • 在更改屏幕尺寸之前:
  • 更改屏幕尺寸后:

示例 2:在此示例中,使用了 。

HTML



  

    

  

    
        

GeeksforGeeks

           

            To fix the width of             columns in the table         

                                                                                                                                                                                                                                                                                                                                                                                                                     
Col1Col2Col3
                    Width of this column remains                      same on varying screen-size                                      Width of this column changes                      on varying screen-size                                      Width of this column also changes                      on varying screen-size                 
Geek1Geek2Geek3
Geek4Geek5Geek6
Geek7Geek8Geek9
    
  

输出:列的宽度设置为“50%”,因此即使更改屏幕尺寸后,第一列的宽度仍为“50%”。

  • 更改屏幕尺寸之前:
  • 更改屏幕尺寸后: