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-width
and max-height
properties. See example below.
我有一张表,我想定义min-width
和max-height
属性。请参见下面的示例。
My problem now is that the browser doesn't take it. If I define it on td
it gets ignored, if I define it in an div
element inside a td
element, 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