HTML 表格 - 固定列宽和多个可变列宽
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/21651767/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
HTML Table - Both fixed and multiple variable column widths
提问by Basaa
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.
我必须建立一个有 5 列的表格。表格宽度是可变的（内容宽度的 50%）。一些列包含固定大小的按钮，所以这些列应该有一个固定的，比如 100px。有些列中有文本，所以我希望这些列具有可变的列宽。
For example:
例如：
Column1: 20% of (tablewidth - sum(fixedwidth_columns))'
Column1: 20% of (tablewidth - sum(fixedwidth_columns))'
Column2: 100px
第 2 列：100 像素
Column3: 40% of (tablewidth - sum(fixedwidth_columns))
Column3: 40% (tablewidth - sum(fixedwidth_columns))
Column4: 200px
第 4 列：200 像素
Column5: 40% of (tablewidth - sum(fixedwidth_columns))
Column5: 40% (tablewidth - sum(fixedwidth_columns))
What is the best way to achieve this?
实现这一目标的最佳方法是什么？
回答by Hashem Qolami
You could set the table-layout: fixedfor the tableelement, then simply set widthattribute on relevant <td>or <th>elements:
您可以table-layout: fixed为table元素设置 ，然后只需width在相关<td>或<th>元素上设置属性：
table {
table-layout: fixed;
}
From the MDN:
来自MDN：
The
table-layoutCSS property defines the algorithm to be used to layout the table cells, rows, and columns.
的
table-layoutCSS属性定义算法要用于布局表单元格，行和列。
Values:
价值观：
fixed:
Table and column widths are set by the widths oftableandcolelements or by the width of the first row of cells. Cells in subsequent rows do not affect column widths.
固定：
表格和列的宽度由table和col元素的宽度或第一行单元格的宽度设置。后续行中的单元格不影响列宽。
回答by G-Cyrillus
to fixed width in a table, you need the table-layoutpropertie set to fixed;Since you mix % and px , it will not be coherent .
要在表格中固定宽度，您需要将table-layout属性设置为fixed;由于您混合 % 和 px ，因此不会连贯。
You may set only the px width and eventually a small value of % and let other column to use width left avalaible. example : http://jsfiddle.net/M4Et8/2/
您可以只设置 px 宽度，最终设置一个很小的 % 值，并让其他列使用左可用的宽度。示例：http: //jsfiddle.net/M4Et8/2/
<table style='table-layout:fixed;width:100%' border='1'>
<tr>
<th style='width: 20%;'>Column1</th>
<th style='width: 100px;'>Column2</th>
<th >Column3</th>
<th style='width: 200px;'>Column4</th>
<th >Column5</th>
</tr>
</table>
回答by Syed Faizan Ahmed
I have applied the same solution: Used 'table-layout:fixed' and given the size to td in percentages. It worked for my static content but when my content increases it some how expands the tdand all the tdand trare disturbed.
我已经应用了相同的解决方案：使用了 ' table-layout:fixed' 并以百分比为单位给出了 td 的大小。它适用于我的静态内容，但是当我的内容增加时，它会如何扩展td并且所有td和tr 都会受到干扰。
Solution:
解决方案：
After so much findings, i came up with the following solution, by this solution your single tablewill be able to display different column sizeswith no expand on horizontal axis.
经过这么多发现，我想出了以下解决方案，通过此解决方案，您的单个表将能够显示不同的列大小，而不会在水平轴上展开。
<table style="table-layout: fixed;">
<tbody>
<tr>
<td colspan="7">
<span>Record Name</span><br>
<span>FUNNY FUNNEL CAKES</span>
</td>
</tr>
<tr>
<td colspan="3">
<span>Event Name</span><br>
<span>NATIONAL CAKE DAY CELEBRATION</span>
</td>
<td colspan="2">
<span>City</span><br>
<span>SAN DIEGO</span>
</td>
<td colspan="1">
<span>Zip</span><br>
<span>92117-4351</span>
</td>
<td colspan="1">
<span>Inspection Type</span><br>
<span>Routine</span>
</td>
</tr>
<tr>
<td colspan="6">
<span>Owner</span><br>
<span>PATTY CAKE</span>
</td>
<td colspan="1">
<span>Inspection Status</span><br>
<span>Complete</span>
</td>
</tr>
</tbody>
</table>
