两列布局相同的高度，表格或div？

Question

我需要一个包含两列的布局，其中每列扩展到较高列的高度。

用表格我会做：

<table class="parent">
    <tr>
        <td class="columnLeft">Column 1</td>
        <td class="columnRight">Column 2</td>
    </tr>
</table>

第1栏和第1栏2将保持相同的变量高度。

使用div有一些解决方案（包括使用overflow：hidden和更多）需要很多黑客才能跨浏览器工作。

（jsFiddle here：http://jsfiddle.net/rJjJa/1/）

在这种情况下，我只需使用表格，而无需额外的CSS黑客攻击（或许多额外的标记）。你认为这张桌子好吗？

Answer 1

如果您希望div的行为与表格相似，则可以对每个display: table-cell;使用div。他们的行为应该像td;两者应该是相同的高度。这应该适用于所有现代浏览器和ie8及以上版本。

Answer 2

标签<table>已过时了布局！不要使用它。

相反，有许多跨浏览器CSS兼容的2列布局，没有使用任何黑客攻击。其中之一是Equal height columns。

等高柱

  

每列中的内容无关紧要，背景颜色将始终向下延伸至最高列的高度。

一篇文章，在此详细解释：Equal Height Columns with Cross-Browser CSS。