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;
}


JSFiddle演示

。

从 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;
}

JSFiddle Demo.

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 of table and col elements or by the width of the first row of cells. Cells in subsequent rows do not affect column widths.

这篇关于HTML表 - 固定列和多个可变列宽的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！