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，但没有任何反应，无论是在 HTML 中使用 height=... 还是在 CSS 中使用 style='height: ...

这是我想要的渲染图: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/