1

我想用一个跨越两行的单元格制作一个表格。第二行的高度尺寸必须尽可能小。例子：

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，将第一行高度设置为rowspan单元格的高度减去第二行的高度。

4

3 回答 3

3

发现：诀窍是将另一个表格放在表格的一个单元格中，其中包含非行跨度内容，从另一个单元格中删除行跨度并将外部和内部表格高度设置为 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/

于 2013-03-20T23:27:07.880 回答
1

卢卡斯·马洛尔的回答几乎奏效了。

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

于 2013-06-05T19:23:55.297 回答
0

尝试position:fixed

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

我认为总的来说，您希望将 div 用于此类工作，因为表格本身会自行增长

更新

这个http://jsfiddle.net/h4Ycj/

或者这个 http://jsfiddle.net/m7eqm/

于 2013-03-16T12:52:56.967 回答