HTML表 - 固定列和多个可变列宽 [英] HTML Table - Both fixed and multiple variable column widths
问题描述
我必须建立一个有5列的表格。表格宽度是可变的(内容宽度的50%)。一些列包含固定大小的按钮,因此这些列应该有固定的,例如100px。某些列中包含文本,因此我希望这些列具有可变的列宽。
例如:
Column1:20%of(tablewidth - sum(fixedwidth_columns))'
Column2:100px
栏位5:40%of(tablewidth - sum(fixedwidth_columns))
Column4:200px
tablewidth - sum(fixedwidth_columns))
这是最好的方法是什么?
您可以设置 表格布局:
,那么只需在相关的元素上设置表
元素固定 width
< td>
或< th>
元素:
< pre class =lang-css prettyprint-override>
table {
table-layout:fixed;
}
。 从 MDN :
table-layout
CSS属性定义要用于
的算法布局表格单元格,行和列。
值:
固定:
表和列宽度由table
和col
元素的宽度或第一行单元格的宽度设置。后续行中的单元格不会影响列宽。
I have to build a table with 5 columns. The table width is variable (50% of content width). Some columns contain fixed-size buttons, so those columns should have a fixed with, say 100px. Some columns have text in them, so I want those columns to have variable column widths.
For example:
Column1: 20% of (tablewidth - sum(fixedwidth_columns))'
Column2: 100px
Column3: 40% of (tablewidth - sum(fixedwidth_columns))
Column4: 200px
Column5: 40% of (tablewidth - sum(fixedwidth_columns))
What is the best way to achieve this?
You could set the table-layout: fixed
for the table
element, then simply set width
attribute on relevant <td>
or <th>
elements:
table {
table-layout: fixed;
}
From the MDN:
The
table-layout
CSS property defines the algorithm to be used to layout the table cells, rows, and columns.
Values:
fixed:
Table and column widths are set by the widths oftable
andcol
elements or by the width of the first row of cells. Cells in subsequent rows do not affect column widths.
这篇关于HTML表 - 固定列和多个可变列宽的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!