0

我有以下代码：

<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

4

5 回答 5

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/

于 2013-07-02T18:44:20.393 回答
0

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

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

.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%，它的高度就会扩展为至少 200 像素（或任何合适的最小高度）。

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

于 2013-07-02T18:59:10.583 回答
0

尽量height:100%;让它占据总高度。

于 2013-07-02T18:26:25.433 回答
0

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

<table>

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

</table>

它肯定会给你你想要的

编辑： 这是使用 rowspan 的概念。现在您应该使用它来构建自己的网页。您的代码中的单元格也很少。您可以使用嵌套表来做到这一点。我的答案显示了如何正确使用 rowspan

于 2013-07-02T18:33:47.010 回答
0

如果您对这张桌子有足够的了解，那么雇佣min-height会在这里为您解决问题。

CSS

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

http://jsfiddle.net/LWxK4/

于 2013-07-02T18:36:37.410 回答