html - テーブルの高さに応じたセルの高さ

Question

私は次のコードを持っています:

<table>
    <tr>
        <td>
            <!-- Black Box -->
        </td>
        <td>
            <!-- Search Box -->
        </td>
    </tr>
    <tr>
        <td rowspan='2'>
            <table>
                <tr><td class='thead'>Statut</td></tr>
                <tr><td><!-- THE TD TO RESIZE --></td></tr>
            </table>
        </td>
        <td>
            <table>
                <tr><td class='thead'>Annonce</td></tr>
                <tr><td><!-- Don't Care --></td></tr>
            </table>
        </td>
    </tr>
    <tr>
        <td>
            <table>
                <tr><td class='thead'>Message</td></tr>
                <tr><td><!-- Don't Care --></td></tr>
            </table>
        </td>
    </tr>
</table>

次のようにレンダリングされます: http://imageshack.us/a/img689/3140/tbi4.png

しかし、「Statut」の下のオレンジ色のセルが、含まれている TD の高さ全体を埋めるようにしたいと思います。高さプロパティをテーブル、TR、および TD に適用しようとしましたが、height=... を使用する HTML であろうと、style='height: ... を使用する CSS であろうと、何も起こりません。

これが私が望むレンダリングです: http://imageshack.us/a/img560/3809/dy4w.png

Answer 1

ここでは、テーブルはレイアウトではなく表形式のデータにのみ使用する必要があるため、テーブルは最良の選択ではないと主張することができます。

ただし、テーブルを使用することにした場合は、それらをネストするのではなく、rowspan を使用して望ましい結果を達成する必要があります。HTML は次のようになります。

<table>
    <tr>
        <td>
            <!-- Black Box -->noir</td>
        <td>
            <!-- Search Box -->cherche</td>
    </tr>
    <tr>
        <td class='titre'>Statut</td>
        <td class='titre'>Annonce</td>
    </tr>
    <tr>
        <td rowspan='3'>lorem ipsum statut</td>
        <td>lorem ipsum annonce</td>
    </tr>
    <tr>
        <td class='titre'>Message</td>
    </tr>
    <tr>
        <td>lorem ipsum message</td>
    </tr>
</table>

この方法では、css の高さを気にする必要はありません (面倒な場合があります)。

実証するために小さな例を設定しました：http://jsfiddle.net/qJQdj/

Answer 2

min-heightあなたがテーブルに満足しているなら、雇用はここであなたのためにトリックを行います.

CSS

td[rowspan="2"] > table{
    min-height:80px;
}

http://jsfiddle.net/LWxK4/

Answer 3

height:100%;全高がかかるようにしてみてください。