在 HTML 表格的 <td> 中设置最小宽度
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/18503849/
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
Set min-width in HTML table's <td>
提问by Thanhma San
My table has several columns.
我的表有几列。
Each column should have dynamic width that depends on the browser window size. On the other hand, each column must not be too tiny. So I tried to set min-widthfor those columns but it's not a valid property. Tried min-widthfor <td>as well but that too is an invalid property.
每列应具有取决于浏览器窗口大小的动态宽度。另一方面，每一列不能太小。所以我试图min-width为这些列设置，但它不是一个有效的属性。也尝试过min-width，<td>但这也是无效的属性。
Is there any way to set min-widthfor col/td in HTML table?
有没有办法min-width在 HTML 表格中设置col/td？
采纳答案by Ali Sa??rvelio?ullar?
try this one:
试试这个：
<table style="border:1px solid">
<tr>
<td style="min-width:50px">one</td>
<td style="min-width:100px">two</td>
</tr>
</table>
回答by o.v.
min-widthand max-widthproperties do not work the way you expect for table cells. From spec:
min-width和max-width属性不能像您期望的表格单元格那样工作。从规格：
In CSS 2.1, the effect of 'min-width' and 'max-width' on tables, inline tables, table cells, table columns, and column groups is undefined.
在 CSS 2.1 中，'min-width' 和 'max-width' 对表格、内联表格、表格单元格、表格列和列组的影响是未定义的。
This hasn't changed in CSS3.
这在 CSS3 中没有改变。
回答by Petr Cibulka
Try using an invisible element (or psuedoelement) to force the table-cell to expand.
尝试使用不可见元素（或伪元素）来强制展开表格单元格。
td:before {
content: '';
display: block;
width: 5em;
}
JSFiddle: https://jsfiddle.net/cibulka/gf45uxr6/1/
JSFiddle：https://jsfiddle.net/cibulka/gf45uxr6/1/
回答by user9413974
One way should be to add a <div style="min-width:XXXpx">within the td, and let the <td style="width:100%">
一种方法应该是<div style="min-width:XXXpx">在 td 中添加一个，然后让<td style="width:100%">
回答by Redous
<table style="min-width:50px; max-width:150px;">
<tr>
<td style="min-width:50px">one</td>
<td style="min-width:100px">two</td>
</tr>
</table>
This works for me using an email script.
这适用于我使用电子邮件脚本。
回答by Hassan Tareq
If you are using fixed layout table i.e datatable, then
如果您使用的是固定布局表，即数据表，则
<td style="display:inline-block; min-width: 「…」px;">Foo</td>
OR
<td style="display:inline-block; min-width: max-content;">Bar</td>
回答by AmirtharajCVijay
<table style="border:2px solid #ddedde">
<tr>
<td style="border:2px solid #ddedde;width:50%">a</td>
<td style="border:2px solid #ddedde;width:20%">b</td>
<td style="border:2px solid #ddedde;width:30%">c</td>
</tr>
<tr>
<td style="border:2px solid #ddedde;width:50%">a</td>
<td style="border:2px solid #ddedde;width:20%">b</td>
<td style="border:2px solid #ddedde;width:30%">c</td>
</tr>
</table>
