使 DIV 的行为像表格一样

Making DIVs behave like tables

提问人：John 提问时间：6/10/2011 最后编辑：Brian Tompsett - 汤莱恩John 更新时间：7/30/2017 访问量：2702

问：

例如，是否可以制作一个带有 div 的 2x2 网格，在调整大小以适应内容时表现得像表格？

喜欢这个

+-----------+
|  1  |  2  |
-------------
|  3  |  4  |
+-----------+

因此，例如，如果您在单元格 #1 中写入内容并且宽度增加以适应内容，则单元格 #3 的大小将调整为使其具有与 #1 相同的宽度。 高度也一样，所以如果你在 #1 中放置换行符并且高度增加，#2 也会得到相同的高度。

我知道它可以通过显示来完成：table，table-row，table-cell，但IE7不支持它们。 是否有任何解决方法（没有 JS）或其他解决方案？

css css-tables tablerow

评论

0赞 Luceos 6/10/2011
只是一个猜测，但是 IE 7 如何处理 CSS min-width 和 min-height？如果你把它添加到div中，同时浮动并使用clear..它真的可能会给你正确的结果吗？
2赞 Bazzz 6/10/2011
只需使用一张桌子。说真的，当有钻头可用时，为什么要用钳子打孔？为合适的工作提供合适的工具
0赞 thirtydot 6/10/2011
我删除了我的答案，因为它无论如何都不适用于您的用例。
0赞 John 6/10/2011
@Luceos如果我将 min-width 设置为 #1 并且它超出了它的 min-width，它不会影响 #3 的宽度，这就是我正在尝试做的:) @Bazzz 这似乎是人们赞成使用表格的少数情况之一

答：

1赞 Ryan 6/10/2011 #1

除了将一个表格放在一个 div 本身中，或者将其他 4 个 div 放在 div 中之外，还有一个 CSS3 Grid Column 属性，但目前任何主要浏览器都不支持它，您可以在此处查看信息

我所知道的唯一其他替代方案（我在 1 个站点中使用）在除 IE 之外的所有浏览器中都受支持，即 CSS3 多列属性。我在容器 div 中嵌套了 2 个 div，1 个顶部和 1 个向下，然后使用此属性。

我希望它有所帮助。

评论

0赞 John 6/10/2011
这很有趣。我希望浏览器（尤其是IE）在接受新标准时能更快......
0赞 Ryan 6/10/2011
@John 实际上，IE9 的改进支持和 Microsoft 对 Web 标准的新承诺给我留下了深刻的印象，包括 CSS3 支持、改进 CSS2 支持和提供 HTML5 支持。希望用不了多久，这些就可以在所有浏览器上标准使用
0赞 MarcinWolny 11/5/2014
3 年后 - 网格布局仍仅受 Internet Explorer 支持。难以置信。
0赞 ChillaraDonga 2/17/2012 #2

你总是可以使用 css 类 display ： table， display ： table-row ，display ： table-cell 来使 div 像 table 一样

.tableClass{
  display : table;
 }
.row{
 display : table-row;
 }
.cell{
  dispaly : table-cell;
 }

上一个：为什么 PHP 不断重置数组指针？

下一个：添加表单操作 [已关闭]