Question

我有一些嵌套表。有一个主外表，它有左侧和右侧列的嵌套表，并且在每列中，一些表堆叠在一起。我似乎无法弄清楚的是如何使列中的表全部跨越相同的宽度（主要在右列）。这是HTML，按比例缩小以便于阅读：

<table class="outer">
        <tr>
            <td>
                <table class="column" id="left_column">
                    <tr>
                        <td>
                            <table class="cell" id="t1">
                            </table>
                        </td>
                    </tr>
                    <tr>
                        <td>
                            <table class="cell" id="t2" style="margin-top:20px; margin-left:86px">
                            </table>
                        </td>
                    </tr>
                </table>
            </td>
            <td>
                <table class="column" id="rightColumn">
                    <tr>
                        <td>
                            <table class="cell" id="t3">
                            </table>
                        </td>
                    </tr>
                    <tr>
                        <td>
                            <table class="cell" id="t4">
                            </table>
                        </td>
                    </tr>
                    <tr>
                        <td>
                            <table class="cell" id="t5">
                            </table>
                        </td>
                    </tr>
                    <tr>
                        <td>
                            <table class="cell" id="t6">
                            </table>
                        </td>
                    </tr>
                    <tr>
                        <td>
                            <table class="cell" id="t7">
                            </table>
                        </td>
                    </tr>
                    <tr>
                        <td>
                            <table class="cell" id="t8">
                            </table>
                        </td>
                    </tr>
                    <tr>
                        <td>
                            <table class="messages" id="t9">
                            </table>
                        </td>
                    </tr>
                </table>
            </td>
        </tr>
    </table>

这是相关的CSS：

.outer
{
margin: auto;
}
.column
{
border: none;
margin-left: auto;
margin-right: auto;
}
table.cell
{
border-collapse: collapse;
}
#rightColumn table
{
padding: 10px;
width: 100%;
}

感谢任何建议。

Answer 1

如果您真的要确定表格列宽，请使用table-layout: fixed上的table CSS属性，并指定第一行中所有单元格的宽度（或使用col元素，如果你没有第一行开始。）

Answer 2

所以我拥有的CSS是有效的。 Firefox实际上为此页面缓存了较旧的CSS。一清除缓存，宽度就达到了100％。

对齐嵌套表格宽度

2 个答案: