Question

我想创建一个包含跨越两行的单元格的表。第二行的高度尺寸必须尽可能小。例如：

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）上，具有最小高度的行是第一个！

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

我怎样才能用CSS破解它？目前我正在使用JS，将第1行高度设置为等于rowspan单元格的高度减去第二行的高度。

Answer 1

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

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/

Answer 2

Lucas Malor的答案几乎可行。

碰巧 IE 不尊重表高= 100％:( 对我来说解决方案很容易，我只是设置像素的高度，因为我知道第一列的高度。

Answer 3

尝试position:fixed

它有点工作。 http://jsfiddle.net/43CEX/

我认为一般来说你想使用div来进行这类工作，因为表格本身是由他们自己增长的

<强>更新

这http://jsfiddle.net/h4Ycj/

或此http://jsfiddle.net/m7eqm/

如果存在rowspan，则Chrome不会尊重行高

3 个答案: