如何使用 HTML 固定表格列宽

17 Mar 2025 | 6 分钟阅读

HTML表格根据数据长度和网页设置列来显示数据。表格列默认是响应式的,但有时用户需要固定表格的宽度。

调整表格的列宽或td标签的宽度非常简单。向标签添加width属性并指定所需的值。如果宽度留空,则列的宽度会随内容大小调整。列的宽度标准可以用百分比或像素表示。

语法

以下语法显示了表格列的固定宽度。

描述

  • 列的宽度可以使用width属性设置。
  • 宽度应根据内容指定。标签可以插入百分比值或像素值。
  • 如果列中的内容非常大,则会溢出。

示例

以下示例在HTML表格中获取固定列宽。我们可以使用px、百分比和其他值来设置宽度。

示例 1

以下示例显示了HTML表格中的固定列宽。我们可以使用像素设置列的宽度。

输出

输出显示了表格列的固定宽度。

How To Fixed Table Column Width Using HTML

示例 2

以下示例显示了HTML表格中的固定列宽。我们可以使用百分比值设置列的宽度。

输出

输出显示了表格列的固定宽度。

How To Fixed Table Column Width Using HTML

示例 3

以下示例显示了HTML表格中的固定列宽。我们可以使用百分比值设置所有列的宽度。第一列和第三列设置为20%,第二列固定为40%。

输出

输出显示了表格列的固定宽度。

How To Fixed Table Column Width Using HTML

示例 4

以下示例显示了HTML表格中的固定列宽。我们可以使用em单位及其值设置第一列和第三列的宽度。HTML表格中的第一列和第三列设置为90em的宽度值。

输出

输出显示了表格列的固定宽度。

How To Fixed Table Column Width Using HTML

示例 5

以下示例显示了HTML表格中的固定列宽。我们可以设置表格第二行第一列和第二列的宽度。宽度元素设置在任何td标签上,以固定HTML表格的列宽。

输出

输出显示了表格列的固定宽度。

How To Fixed Table Column Width Using HTML

结论

固定宽度对于响应式网页上的粘性列至关重要。它根据内容的重要性显示数据特征和表格列。