Question

我正在尝试创建一个网格，允许内部“行”的内容具有动态高度，但同时保持每个“单元格”的边框。我想不出办法做到这一点，不会涉及讨厌的黑客，需要一些帮助。

以下示意图解释了我到目前为止所做的以及到目前为止我尝试过的内容：

理想情况下：

由于渲染原因没有表格，虽然它肯定会起作用
应该是IE6 / IE7友好的

Answer 1

这有点乱，但它适用于IE9，FF，Chrome和＆amp; Safari（最后三个也在Mac版本上）。

<!DOCTYPE html>
<html>
<head>
    <title>Page Title</title>
    <style type="text/css">
        .containerDiv {
            border-left: 1px solid black;
            border-bottom: 1px solid black;
            width: 903px;
        }
        .rowDiv {
            border-top: 1px solid black;
        }
        .cellDiv {
            border-right: 1px solid black;
            display: table-cell;
            width:300px;
            padding: 4px;
        }
    </style>
</head>

<body>
    <div class="containerDiv">
        <div class="rowDiv">
            <div class="cellDiv">This is some text.</div>
            <div class="cellDiv">This is some text. This is some text. This is some text. This is some text.</div>
            <div class="cellDiv">This is some text.</div>
        </div>
        <div class="rowDiv">
            <div class="cellDiv">This is some text.</div>
            <div class="cellDiv">This is some text.</div>
            <div class="cellDiv">This is some text. This is some text. This is some text. </div>
        </div>
        <div class="rowDiv">
            <div class="cellDiv">This is some text.</div>
            <div class="cellDiv">This is some text. This is some text. This is some text. This is some text.</div>
            <div class="cellDiv">This is some text.</div>
        </div>
        <div class="rowDiv">
            <div class="cellDiv">This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text.</div>
            <div class="cellDiv">This is some text.</div>
            <div class="cellDiv">This is some text. This is some text. This is some text. </div>
        </div>
    </div>


</body>
</html>

诀窍是将.cellDiv div设置为display: table-cell。你还必须给它们一个宽度。主容器宽度比内部宽度的总和宽3个像素，以考虑边界宽度。请注意如何操作边框，以便只显示一行。

Answer 2

表格是理想的解决方案，但正如您所提到的，在这种情况下对您无效。

使用display: table-cell;也不适合您，因为IE6 / 7不支持它。

您最好的选择是遵循概述here的方法。实质上，您需要为每个单元格创建一个包装行div，并使用右边框（或任何其他所需的样式），然后将它们相对于左侧相对位置等于单元格的宽度。不是一个漂亮的解决方案，但要解决这个问题是个难题。

或者，您可以使faux columns表单元格的边框（和背景，如果需要）实际上只是应用于行并垂直重复的背景图像的一部分。这将是更简单的HTML和CSS明智，但需要从样式中创建一个图像，这可能是一个巨大的痛苦，无论何时你想要改变一些东西。

没有使用表格的带有边框的表格网格

2 个答案: