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格式为高度= ...还是CSS格式为style ='height：...

这是我想要的渲染：http://imageshack.us/a/img560/3809/dy4w.png

Answer 1

有人可能认为表格不是这里的最佳选择，因为它们只应用于表格数据，而不能用于布局。

但是，如果您决定使用表格，则不应嵌套它们，而应使用rowspan来实现deisred结果。 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

尝试height:100%;使其达到总高度。

Answer 3

更改了代码：将您的代码转换为：

<table>

     <tr >
          <td class='thead' rowspan='2'>Statut</td>
           <td class='thead'>Message</td>
     </tr>
     <tr><td class='thead'>Message</td></tr>

</table>

它会给你你想要的东西

编辑：这是使用rowspan.now的概念，你应该使用它来构建自己的网页。你的代码中还有更多的单元格。你可以使用嵌套表来做到这一点。我的回答显示了如何正确使用rowspan

Answer 4

如果您对该表有所了解，那么使用min-height将为您提供帮助。

CSS

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

http://jsfiddle.net/LWxK4/

Answer 5

如果你真的想要嵌套表......

您可以强制嵌套的表/表格单元格具有最小高度，如下所示：

将类.statut-panel添加到内部表格中：

<table class="wrap">
    <tr>
        <td>Black Box</td>
        <td>Search Box</td>
    </tr>
    <tr>
        <td rowspan='2'>
            <table class="statut-panel">
                <tr>
                    <td class='thead'>Statut</td>
                </tr>
                <tr class="full-size">
                    <td>THE TD TO RESIZE...</td>
                </tr>
            </table>
        </td>
        <td>
            <table class="annonce-panel">
                <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>

并应用以下CSS：

table td {
    background-color: lightgray;
    vertical-align: top;
}
table.statut-panel {
    border: 1px solid blue;
    height: 200px;
}
table.statut-panel .full-size td {
    border: 1px dotted blue;
    height: 100%;
}

给内表.status-panel一个固定的高度，比如200px。 CSS会将此视为最小高度，因此当表内容扩展时，您不会遇到任何溢出问题。

对于要展开的表格单元格table.statut-panel .full-size td，只需将高度设置为100％，它的高度将扩展至至少200px（或任何最佳高度）。

请参阅演示：http://jsfiddle.net/audetwebdesign/7L3Bc/

根据桌子高度的单元格高度

5 个答案:

如果你真的想要嵌套表......