如何在 HTML 或 CSS 中指定表格单元格的绝对最小宽度
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/56658/
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
How do I specify in HTML or CSS the absolute minimum width of a table cell
提问by Edward Wilde
Summary
概括
What's the best way to ensure a table cell cannot be less than a certain minimum width.
确保表格单元格不能小于某个最小宽度的最佳方法是什么。
Example
例子
I want to ensure that all cells in a table are at least 100px wide regards of the width of the tables container. If there is more available space the table cells should fill that space.
我想确保表格中的所有单元格至少有 100 像素宽，与表格容器的宽度相比。如果有更多可用空间，表格单元格应填充该空间。
Browser compatibility
浏览器兼容性
I possible I would like to find a solution that works in
我可能想找到一个适用的解决方案
- IE 6-8
- FF 2-3
- Safari
- IE 6-8
- FF 2-3
- 苹果浏览器
In order of preference.
按优先顺序。
回答by James B
This CSS should suffice:
这个 CSS 应该足够了：
td { min-width: 100px; }
However, it's not always obeyed correctly (the min-width attribute) by all browsers (for example, IE6 dislikes it a great deal).
然而，它并不总是被所有浏览器正确遵守（min-width 属性）（例如，IE6 非常不喜欢它）。
Edit:As for an IE6 (and before) solution, there isn't one that works reliably under all circumstances, as far as I know. Using the nowrap HTML attribute doesn't really achieve the desired result, as that just prevents line-breaks in the cell, rather than specifying a minimum width.
编辑：至于 IE6（及之前）解决方案，据我所知，没有一种在所有情况下都能可靠运行。使用 nowrap HTML 属性并没有真正达到预期的结果，因为这只是防止单元格中的换行符，而不是指定最小宽度。
However, if nowrap is used in conjunction with a regular cell width property (such as using width: 100px), the 100px will act likea minimum width and the cell will still expand with the text (due to the nowrap). This is a less-than-ideal solution, which cannot be fully applied using CSS and, as such, would be tedious to implement if you have many tables you wish to apply this to. (Of course, this entire alternative solution falls down if you want to have dynamic line-breaks in your cells, anyway).
然而，如果NOWRAP结合使用与常规小区width属性（使用宽度如：100像素）时，100像素将作用像的最小宽度和所述小区仍然将与文本（由于NOWRAP）扩大。这是一个不太理想的解决方案，无法使用 CSS 完全应用它，因此，如果您希望将其应用于许多表，那么实现起来会很乏味。（当然，无论如何，如果您想在单元格中使用动态换行符，则整个替代解决方案都会失败）。
回答by Michael Haren
Another hackis the old 1x1 transparent pixel trick. Insert an 1x1 transparent gif image and set its width in the image tag to the width you want. This will force the cell to be at least as wide as the image.
另一个黑客是旧的 1x1 透明像素技巧。插入一个 1x1 的透明 gif 图像并将其在图像标签中的宽度设置为您想要的宽度。这将强制单元格至少与图像一样宽。
回答by Partack
I know this is an old question but i thought I'd share something that wasn't mentioned (Although pretty simple in concept..) you can just put a <div>inside the table (in one of the <td>'s or something) and set the <div>to min-width. the table will stop at the <div>'s width. Just thought I'd throw that out there in case somebody comes across this on google. Also, I'm not so sure about how min-width is handled in I.E6. but that has already been covered in another answer.
我知道这是一个老问题，但我想我会分享的东西，没有提到（虽然概念很简单..）你可以把一个<div>表内（于一体<td>的或东西），并设置<div>到min-width。表格将停在<div>的宽度处。只是想我会把它扔在那里，以防有人在谷歌上遇到这个。另外，我不太确定如何在 IE6 中处理 min-width。但这已经包含在另一个答案中。
回答by Dean Peters
I had some success with:
我在以下方面取得了一些成功：
min-width: 193px;
width:auto !important;
_width: 193px; /* IE6 hack */
Based on a combination of Vatos' response and a min-height article here: http://www.dustindiaz.com/min-height-fast-hack/
基于 Vatos 的回应和此处的最小高度文章的组合：http: //www.dustindiaz.com/min-height-fast-hack/
回答by Prof83
This is a cross-browser way for setting minimum width and/or mimimum height:
这是设置最小宽度和/或最小高度的跨浏览器方式：
{
width (or height): auto !important;
width (or height): 200px;
min-width (or min-height): 200px;
}
IE 6 doesn't understand !important
IE 6 sees width/height:200px (overwriting auto)
IE 6 不理解！重要的
IE 6 看到宽度/高度：200px（覆盖自动）
Other browsers understand the min- and the !important
其他浏览器理解 min- 和 !important
I am not 100% familiar with the behaviour of widths in TD elements, but this all works nicely on eg DIV tags
我不是 100% 熟悉 TD 元素中宽度的行为，但这一切都适用于例如 DIV 标签
BTW:
顺便提一句：
Based on a combination of Vatos' response and a min-height article here: http://www.dustindiaz.com/min-height-fast-hack/
基于 Vatos 的回应和此处的最小高度文章的组合：http: //www.dustindiaz.com/min-height-fast-hack/
This is not working because of the order of the first 2 lines, they need to be in the right order (think about the above) ;)
由于前 2 行的顺序，这不起作用，它们需要按正确的顺序排列（想想上面的内容）；)
回答by Jeffrey04
what about this css property
这个css属性怎么样
min-width: 100px
but it doesn't really work in IE6 if not mistaken
但如果没有记错的话，它在 IE6 中并不能真正工作
if you don't want to do it in the css way, I suppose you can add this attribute
如果你不想用 css 的方式来做，我想你可以添加这个属性
nowrap="nowrap"
in your table data tag
在您的表格数据标签中
回答by Jeffrey04
IE6 handles width as min-width:
IE6 处理宽度为 min-width：
td {
min-width: 100px;
_width: 100px;/* IE6 hack */
}
If you want IE6 to handle width like normal browsers, give it an overflow:visible; (not the case here)
如果你想让 IE6 像普通浏览器一样处理宽度，给它一个 overflow:visible; （这里不是这种情况）
