1

2 つの行にまたがるセルを含むテーブルを作成したいと考えています。2 行目の高さは、できるだけ小さくする必要があります。例：

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セルの高さから2行目の高さを引いた値に設定しています。

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 に答える
0

試すposition:fixed

それは一種の作品です。http://jsfiddle.net/43CEX/

テーブルはネイティブに独自に成長するため、一般的に、この種の作業には div を使用する必要があると思います

アップデート

このhttp://jsfiddle.net/h4Ycj/

またはこれ http://jsfiddle.net/m7eqm/

于 2013-03-16T12:52:56.967 に答える