如果rowspan存在，Chrome不会满足行高 [英] Chrome doesn't honor row height if rowspan is present

问题描述

我想使用跨两行的单元格创建表格。第二行的高度必须尽可能小。示例：

I want to make a table with a cell that spans on two rows. The second row must have the height size as minimum as possible. Example:

html：

<table>
    <tr id="row-1">
        <td>
            1st row
        </td>
        <td rowspan="2">
            a <br />
            a <br />
            a <br />
            a <br />
            a <br />
            a <br />
            a <br />
            a <br />
        </td>
    </tr>
    <tr id="row-2">
        <td>
            2nd row
        </td>
    </tr>
</table>

css：

td
{
    border: 1px solid black;
}
#row-2
{
    height: 1px;
}

http://jsfiddle.net/xp7vz/

它适用于Firefox（19.0.2）。在Chromium（25.0.1364.160）上，具有最小高度的行是第一个！

It works on Firefox (19.0.2). On Chromium (25.0.1364.160), the row with the minimum height is the first one!

编辑：问题是由此错误造成的： http://code.google.com/p/chromium/issues/detail?id=78724 a>

The problem is caused by this bug: http://code.google.com/p/chromium/issues/detail?id=78724

我如何使用CSS进行攻击？目前我使用JS，设置第一行高度等于rowspan单元格的高度减去第二行的高度。

How can I hack it with CSS? Currently I'm using JS, setting the 1st row height equal to the height of the rowspan cell minus the height of the second row.

推荐答案

找到：诀窍是将另一个表放入具有非rowspan内容的表的单元格中，从其他单元格中删除rowspan，并将外表和内表高度设置为100％。可怕但有效。

Found: the trick is to put another table inside a cell of the table with the non-rowspan content, remove the rowspan from the other cell and set the outer and inner table height to 100%. Horrible but effective.

HTML：

<table id="outer"><tbody><tr>
    <td>
        <table id="inner"><tbody>
            <tr id="row-1">
                <td>1st row</td>
            </tr>
            <tr id="row-2">
                <td>2nd row</td>
            </tr>
        </tbody></table>
    </td>
    <td>
        a<br />
        a<br />
        a<br />
        a<br />
        a<br />
        a<br />
        a<br />
        a<br />
        a<br />
    </td>
</tr></tbody></table>

CSS：

#row-2 
{
    height: 1px;
}
#outer, #inner 
{
    height:100%;
}

http：//jsfiddle.net/xp7vz/3/

这篇关于如果rowspan存在，Chrome不会满足行高的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！