我们已经看过文章,如何固定表格中的行高。
表格中列的宽度即td可以很容易地固定。这可以通过在
句法:
方法:
- width属性用于设置列的宽度。它被添加到
标签中。
- 宽度应根据内容指定,以像素或百分比为单位。
- 如果列中的内容很大,就会溢出。
例1:本例中,第一列的宽度是固定的,但其他列的宽度不固定。所以,当我们改变屏幕的大小时,第一列的宽度保持不变,但另一列的宽度根据内容而变化。但是,如果根据内容指定的宽度不够大,这可能不起作用,第一列将溢出并与另一列类似。
HTML
GeeksforGeeks
To fix the width of
columns in the table
Col1
Col2
Col3
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
Geek1
Geek2
Geek3
Geek4
Geek5
Geek6
Geek7
Geek8
Geek9
HTML
GeeksforGeeks
To fix the width of
columns in the table
Col1
Col2
Col3
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
Geek1
Geek2
Geek3
Geek4
Geek5
Geek6
Geek7
Geek8
Geek9
输出:运行以下代码并更改屏幕大小以查看列之间的差异。
- 在更改屏幕尺寸之前:
- 更改屏幕尺寸后:
示例 2:在此示例中,使用了
。
HTML
GeeksforGeeks
To fix the width of
columns in the table
Col1
Col2
Col3
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
Geek1
Geek2
Geek3
Geek4
Geek5
Geek6
Geek7
Geek8
Geek9
输出:列的宽度设置为“50%”,因此即使更改屏幕尺寸后,第一列的宽度仍为“50%”。
- 更改屏幕尺寸之前:
- 更改屏幕尺寸后: