Html 表格属性的最小宽度和最大高度
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/6426779/
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
Min-width and max-height for table attributes
提问by Stefan
I have a table and I want to define the min-widthand max-heightproperties. See example below.
我有一张表，我想定义min-width和max-height属性。请参见下面的示例。
My problem now is that the browser doesn't take it. If I define it on tdit gets ignored, if I define it in an divelement inside a tdelement, the content has the right min and max width, but the table still has the same size. (so there is a lot of free space :/)
我现在的问题是浏览器不接受它。如果我在其上定义它td会被忽略，如果我在div元素内的td元素中定义它，则内容具有正确的最小和最大宽度，但表格仍然具有相同的大小。（所以有很多可用空间：/）
How can I resolve this?
我该如何解决这个问题？
EDIT: I just noticed that the problem seems to only occur when the table is in fullscreen mode. Nevertheless, an element shouldn't have more than the max-width than!
编辑：我刚刚注意到问题似乎只在表格处于全屏模式时发生。尽管如此，一个元素的宽度不应超过最大宽度！
Example:
例子：
<html>
<head>
<style type="text/css">
td {
border: 1px solid black;
}
html,body,.fullheight {
height: 100%;
width: 100%;
}
.minfield {
max-width: 10px;
border: 1px solid red;
overflow: hidden;
}
</style>
</head>
<body>
<table class="fullheight">
<tr>
<td class="minfield">
<div class="minfield">
<p>hallo</p>
</div>
</td>
<td><p>welt</p></td>
</tr>
</table>
</body>
</html>
回答by Arsen7
For table cells the 'width' property should be used, as the 'min-width' and 'max-width' is undefined for table cells. See the specification:
对于表格单元格，应使用 'width' 属性，因为表格单元格的 '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' 对表格、内联表格、表格单元格、表格列和列组的影响是未定义的。”
To enforce the width, you may try to change the table-layoutproperty to "fixed". The specification describes the algorithm pretty clearly.
要强制宽度，您可以尝试将table-layout属性更改为“固定”。该规范非常清楚地描述了算法。
回答by macloving
To force min-height attribute for td you also can put invisible image in td, or wrap you td into div. Example for first case:
要强制为 td 设置 min-height 属性，您还可以在 td 中放置不可见的图像，或者将 td 包装到 div 中。第一种情况的示例：
<td><img style="float:left;min-height:50px;visibility:hidden;width:0px;">12345</td>
回答by symlink
I don't see a problem with setting min-width for tables and cells. See this jsFiddle.
我认为为表格和单元格设置最小宽度没有问题。看到这个jsFiddle。
HTML:
HTML：
<table style="border:solid 1px #000;">
<tr>
<td id="cell-one" style="border:solid 1px #000;">
test 1
</td>
<td style="border:solid 1px #000;">
test 2
</td>
</tr>
</table>
and CSS:
和 CSS：
table{width: 90%;}
td#cell-one{min-width: 20%;}
Remember, min-width is dependent on width (or max-width). max-width overrides width, and min-width overrides width or max-width. In other words, be sure to set the width property on the parent of the element you apply min-width to: jsFiddle
请记住，最小宽度取决于宽度（或最大宽度）。最大宽度覆盖宽度，最小宽度覆盖宽度或最大宽度。换句话说，一定要在你应用 min-width 的元素的父元素上设置 width 属性：jsFiddle
