Question

我有一个跨越行的表格如下：

+----------+---------+
| Spanned  |  Row A  |
| row      |         |
| (several +---------+
| lines of |  Row B  |
| text)    |         |
+----------+---------+

行A和B的内容垂直顶部对齐，但行也垂直均匀分布，与跨越的行具有相同的高度。我想结果就像这个instread：

+----------+---------+
| Spanned  |  Row A  |
| row      +---------+
| (several |  Row B  |
| lines of |         |
| text)    |         |
+----------+---------+

也就是说，我希望行A尽可能小，只有行B才能垂直扩展。可以这样做吗？我已经通过CSS尝试了各种样式，包括min-height，但行似乎总是均匀分布。实际上，我有比A和B更多的行，并且我只希望最后一行垂直扩展到实际内容之外。我无法预测任何行中的实际内容量，因此明确设置高度将无效。

Answer 1

没有你的html标记就很难回答。但您想要的行为似乎是Chrome下的默认行为。

您需要为行设置固定高度，并将最后一行设置为“自动”，以便填充表格的其余部分。

对于firefox，我使用了这段代码：

<html>
    <head>
        <style type="text/css">
        table td {
            border: 1px solid black;
            width: 200px;
            vertical-align: top;
        }

        table tr {
            height: 1.2em;
        }

        table tr.last {
            height: auto;
        }

        </style>
    </head>
    <body>
        <table>
            <tr>
            <td rowspan="2">Several lines of text. Lorem ipsumLorem ipsum dolor sit amet, consectetur     adipisicing elit, sed do eiusmod
                tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
                quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
                consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
                cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
                proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</td>
                <td>Line A</td> 
            </tr>
            <tr class="last">
                <td>Line B</td>
            </tr>
        </table>
    </body>
</html>

请注意，您可以使用CSS伪类而不是我使用的“last”类，具体取决于您希望能够支持的浏览器。

Answer 2

根据CSS规范：

CSS 2.1没有指定跨越多行的单元格如何影响行高计算，除了所涉及的行高的总和必须足够大以包含跨越行的单元格。

参考：http://www.w3.org/TR/CSS2/tables.html#height-layout

但是，您可以接近以下内容。

例如，如果您有一个4行表：

<table>
    <tr>
        <td rowspan="4">The left stuff...</td>
        <td >Row A and some more text for demo.</td>
    </tr>
    <tr>
        <td >Row B</td>
    </tr>
    <tr>
        <td >Row C</td>
    </tr>
    <tr>
        <td class="last">Row D</td>
    </tr>
</table>

应用以下CSS：

table {
    border: 1px dotted blue;
    width: 300px;
    table-layout: fixed;
}
td {
    vertical-align: top;
    height: 10px;
}
td.last {
    background-color: beige;
    height: auto;
}

为td高度设置一个较小的长度值。表格单元格将高度值视为最小值，因此较小的值会模拟收缩 - 拟合效果。

对于最后一个（底部）表格单元格，设置height: auto，这样可以让单元格在高度上展开。从CSS规范中不清楚这应该有效，结果可能与浏览器有关。（我在Firefox中测试过。）

请参阅演示：http://jsfiddle.net/audetwebdesign/jrCHj/

Answer 3

尝试为所有单元格设置<td style="height:1%">，但第二列中的最后一个单元格除外。让我工作得很完美，至少在Firefox中。

http://jsfiddle.net/Sy6vH/

如何避免行在表中垂直均匀分布

3 个答案: