Question

我正在尝试嵌套表格，我希望嵌套表格的高度等于其容器的高度。

<!DOCTYPE html>
<html>
    <head>
        <title></title>
    </head>
    <body>
        <div class="wrapper">
            <table>
                <thead>
                    <tr>
                        <th>Col 1</th>
                        <th>Col 2</th>
                        <th>Col 3</th>
                        <th>Col 4</th>
                        <th>Col 5</th>
                        <th>Col 6</th>
                    </tr>
                </thead>
                <tbody>
                    <tr>
                        <td>a</td>
                        <td>b</td>
                        <td>c</td>
                        <td class="has-nested-table">
                            <table>
                                <tbody>
                                    <tr>
                                        <td>d</td>
                                        <td>e</td>
                                    </tr>
                                </tbody>
                            </table>
                        </td>
                        <td>f</td>
                        <td>g</td>
                    </tr>
                    <tr>
                        <td>h</td>
                        <td>i</td>
                        <td>j with some other letters because he has been so lonely lately</td>
                        <td class="has-nested-table">
                            <table>
                                <tbody>
                                    <tr>
                                        <td>k</td>
                                        <td>l</td>
                                    </tr>
                                </tbody>
                            </table>
                        </td>
                        <td>m</td>
                        <td>n</td>
                    </tr>
                    <tr>
                        <td>o</td>
                        <td>p</td>
                        <td>q</td>
                        <td class="has-nested-table">
                            <table>
                                <tbody>
                                    <tr>
                                        <td>r</td>
                                        <td>s</td>
                                    </tr>
                                    <tr>
                                        <td>t</td>
                                        <td>u</td>
                                    </tr>
                                    <tr>
                                        <td>v</td>
                                        <td>w</td>
                                    </tr>
                                </tbody>
                            </table>
                        </td>
                        <td>x</td>
                        <td>y</td>
                    </tr>
                </tbody>
            </table>
        </div>
    </body>
</html>

这是CSS * { 余量：0; 概要：0; 填充：0 }

html, body
{
    font:normal 11px/1.4 Helvetica, Arial, Sans-Serif;
    height:100%
}

.wrapper
{
    margin:0 auto;
    padding:0 10px;
    width:940px
}

table
{
    border-collapse:collapse;
    height:100%;
    table-layout:fixed;
    width:100%
}

    thead
    {
        background:#595959;
        border:1px solid #595959
    }

    tbody, tr
    {
        height:100%
    }

        th
        {
            color:#f5f5f5
        }

        th, td
        {
            padding:5px
        }

        td
        {
            border:1px solid #ccc;
            text-align:center;
            vertical-align:top
        }

        td.has-nested-table
        {
            padding:0
        }

            td table
            {
                height:100%
            }

            td td
            {
                border-bottom:0;
                border-left:0;
                border-top:0;
                vertical-align:top
            }

            td td:last-child
            {
                border:0
            }

嵌套表在firefox和chrome中展开，但在IE9中不展开。救命啊！

Answer 1

添加此css，然后尝试

td.has-nested-table table{
   height: auto;
}

Answer 2

问题是您要将边框分配给

td td {

并且文本在连接列中占用更多空间，如

<td>j with some other letters because .... </td>

嵌套表不会扩展，因为它只有一行。

所以要解决这个问题，除了@Harshit答案之外，还需要添加

td td { border: 0px; }

检查http://jsfiddle.net/raunakkathuria/8UxbS/

在IE上运行正常，如果边框在嵌套表中不重要，看起来好多了，但是如果需要边框那么你需要添加rowspan和stuff，但这不是完全证明

IE9嵌套表父级td的填充高度

2 个答案: