HTML 表格是使用table 标记与后续标记(如tr 标记)的组合创建的,以在表格中创建新行。表头的th 标签和 td 标签用于定义表中的单元格。但是,表格的每个单元格默认设计为适合任何大小的内容,因此每个单元格都会根据其中的信息更改其宽度。因此,我们学习如何将单元格的宽度固定为任何大小或值。
默认情况下,HTML 单元格大小是动态的。因此,如果要在单元格中显示的内容很大,则单元格的大小会根据其中的内容而变化。但是,在某些情况下,需要固定单元大小以保持均匀性和美观。
有几种方法可以使 HTML 表格中的单元格大小固定。
使用 CSS table-layout 属性:这个属性应该用于改变表格的布局特性。默认情况下,table-layout 值为 auto。这意味着如果我们更改它以修复会影响的单元格大小,则单元格大小会根据其中的内容而变化。通过将值更改为固定,表格布局是固定的。其他行中的单元格不影响列宽。如果第一行没有宽度,则列宽。无论单元格内的内容如何,列宽在整个表格中均等划分。
下面的例子说明了上述方法:
- 例子:
table-layout property GeeksforGeeks
Default width table cell
Author Name Age College RaviPratap Singh 24 GFG Rakesh Singh 25 GEEKS
Equal width table cell
Author Name Age College RaviPratap Singh 24 GFG Rakesh Singh 25 GEEKS - 输出:
使用 CSS 宽度属性:通过使用此属性,我们可以定义每个单元格的宽度值。如果我们以等百分比单位设置值,那么每个单元格的宽度将相等,每次窗口大小都无关紧要。
- 例子:
table-layout property GeeksforGeeks
Default width table cell
Author Name Age College RaviPratap Singh 24 GFG Rakesh Singh 25 GEEKS
Equal width table cell
Author Name Age College RaviPratap Singh 24 GFG Rakesh Singh 25 GEEKS - 输出: