如何控制表格单元格的最小宽度？

Question

在各种情况下，我需要确保表格单元格不会缩小到一定宽度以下。为了实现这一点，我尝试了多种选项，具体如下：

• td 元素上设置 width 属性：效果还行，但是某些浏览器会忽略它，而且在 HTML5 中也无效。
• CSS 样式表中使用 width 属性：被某些浏览器忽略。
• 将图片的宽度设置为 X，高度为 1：会导致 td 内容向上或向下移动（超过 1 像素）。
• 使用一个宽度为 X，高度为 1，且设置了 float:left 的 div 元素：目前看来这是最好的解决方案，虽然它确实会稍微影响内容的位置。

还有其他想法吗？

我希望它可以在任何浏览器中都能够工作，包括 IE6 :( 但如果有些解决方案不能在 IE6 上工作，但在其他浏览器上可以，那也算是一个开始吧 :)

- Darryl Hein

---

使用div，忘记table :) - thenengah

我很乐意。我该如何让它们完全像表格一样，包括colspan和rowspan？ - Darryl Hein

如果它是一张表格，那么就是一张表格。我认为没有太多理由改用 div 元素，只是为了使用 CSS 把它们变回表格。 - user166390

Answer 1

无法可靠地控制表格单元格的宽度。最好将内容包装在DIV（或任何其他块级元素）中，并针对该元素进行调整。

- Brandon Durham

---

如果他要呈现表格数据，应该使用表格。从语义的角度来看，如果不使用表格呈现表格数据，就像使用表格呈现非表格数据一样糟糕。 - Alberto Martinez

我认为@Brandon的意思不是要替换整个表格，而是将单元格内的内容用div包裹起来，例如<tr><td><div>foo bar</div></td></tr>。 - Darryl Hein

啊，我没明白，确实使用一个空白图片会更好。 - Alberto Martinez

没错...使用表格来存储数据，只需将每个单元格中的数据包裹在块级元素中即可。 - Brandon Durham

Answer 2

min-width 属性可以正确控制最小宽度，在支持该属性的浏览器中。通常情况下，width 属性在 IE6 等低版本浏览器中也能像 min-width 一样工作。但具体效果因浏览器而异。

- user166390

Answer 3

看一下min-width。虽然不兼容IE6，但在大多数其他浏览器中表现不错。

- Scott Baker