Question

我在Stack Overflow上看过其他类似的问题，但我的要求似乎比平时更严格，我没有找到现有的解决方案。不用多说，这是一个有希望的自我解释的小提琴：

在Chrome中运行得很好，但在Firefox或IE中则不行。我的系统截图：

Renderings in different browsers

请注意，表格内容非常动态，因此任何涉及固定宽度或高度的解决方案都可能无效。即使列数也是动态的。由于动态列宽应该匹配多行，我可能无法在没有表的情况下实现这一点。

我发现在SO上不需要没有实际代码的jsfiddle链接，所以这里是样本的HTML：

<table>
    <tr>
        <td rowspan="3">
            <div>Many lines here</div>
            <div>Many lines here</div>
            <div>Many lines here</div>
            <div>Many lines here</div>
            <div>Many lines here</div>
            <div>Many lines here</div>
            <div>Many lines here</div>
            <div>Many lines here</div>
            <div>Many lines here</div>
            <div>Many lines here</div>
        </td>

        <td>The first two rows must take up minimal height.</td>
        <td>When the table gets narrow, the text must wrap.</td>
    </tr>
    <tr>
        <td>Which takes up a little additional height.</td>
        <td>So I can't set a fixed height for these rows.</td>
    </tr>
    <tr class="spacer">
        <td>Spacer rows like this must take up maximum height.</td>
        <td>With height: 100%, they do in Chrome, but not Firefox or IE.</td>
    </tr>
    <tr>
        <td rowspan="3">
            <div>More lines here</div>
            <div>More lines here</div>
            <div>More lines here</div>
            <div>More lines here</div>
            <div>More lines here</div>
            <div>More lines here</div>
            <div>More lines here</div>
            <div>More lines here</div>
        </td>

        <td>And that's not all! The cells on this row must</td>
        <td>have the same dynamic widths as the ones above.</td>
    </tr>
    <tr>
        <td>So we can't use fixed widths.</td>
        <td>And probably no nested tables either.</td>
    </tr>
    <tr class="spacer">
        <td></td>
        <td></td>
    </tr>
</table>

和CSS：

table {
    border-collapse: collapse
}
td {
    border: 1px solid #ccc;
    padding: 4px 8px
}
tr.spacer td {
    height: 100%
}

Answer 1

在CSS 2.1中：

CSS 2.1未指定跨越多行的单元格如何影响行高计算除了行高的总和涉及的内容必须足够大，以涵盖跨越行的单元格。

在这方面CSS3似乎没有什么新东西（但我可能已经错过了它）。

请注意，至少在Safari中，您实际上并不需要height: 100%来获得预期的结果。

获取HTML表格行以占用最大高度

1 个答案: