3

我有一个跨行的表，如下所示：

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

A 行和 B 行的内容是垂直顶部对齐的，但 Rows 也垂直均匀分布，与跨行具有相同的高度。我希望结果不是这样：

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

也就是说，我希望 A 行尽可能小，只有 B 行垂直扩展。这可以做到吗？我通过 CSS 尝试了各种样式，包括最小高度，但行似乎总是均匀分布。实际上，我的行数比 A 和 B 多，我只希望最后一行垂直扩展超出实际内容。我无法预测任何行中的实际内容量，因此明确设置高度不起作用。

4

3 回答 3

2

如果没有您的 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”类，具体取决于您希望能够支持的浏览器。

于 2013-09-11T13:34:03.503 回答
1

根据 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/

于 2013-09-11T13:34:06.510 回答
0

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

http://jsfiddle.net/Sy6vH/

于 2013-09-11T13:23:11.087 回答