每行中具有不同单元格数量的 HTML 表格：如何在其行中均匀地排列单元格？

Question

我有一个 HTML 表格，其中的列数可能因行而异。尽管如此，我希望这些列在它们的行中均匀分布。 （例如，如果我的第一行包含 2 列，则每列应占表格总宽度的 50%；如果第二行有 3 列，则每列应占表格总宽度的约 33%。 )

此外，我希望表格具有容器的宽度（因此可能在 CSS 中使用 width: 100%；但问题是该属性告诉表格根据仅限森林行）。容器宽度可能会有所不同，这就是我必须使用百分比的原因。

我还尝试使用 div 自己制作表格，并用百分比指定每个“cell-div”的宽度，但这种解决方案并不能在每个浏览器上提供良好的结果：有时，当没有更多行上的空格，一行的最后一个“cell-div”在它下面。 （我必须指定一些奇怪的宽度，例如49.99998% 或33.333233%，因为我的边框也需要一些空间。）

Answer 1

听起来您并没有真正使用table 元素来显示表格数据，只是为了进行一些对齐。获得所需结果的一种方法是将每一行设为自己的表格并设置宽度。每行将在表格宽度上均匀分布单元格。您可能需要添加更多 CSS 格式以使其按您想要的方式运行。

你可以在http://jsfiddle.net/RxSe5/1/看到这个。

Answer 2

您可以在每个 TD 内添加表格：

    <table style="width:100%;text-align:center;">
        <tr>
            <td>
                <table style="width:100%">
                    <tr>
                        <td>1</td>
                        <td>2</td>
                    </tr>
                </table>
            </td>
        </tr>
        <tr>
            <td>
                <table style="width:100%">
                    <tr>
                        <td>1</td>
                        <td>2</td>
                        <td>3</td>
                    </tr>
                </table>
            </td>
        </tr>
    </table>
​

或者您可以添加新表：

<div>
    <table style="width:100%;text-align:center;">
        <tr>
            <td>1</td>
            <td>2</td>
        </tr>
    </table>
    <table style="width:100%;text-align:center;">
        <tr>
            <td>1</td>
            <td>2</td>
            <td>3</td>
        </tr>
    </table>
    <table style="width:100%;text-align:center;">
        <tr>
            <td>1</td>
            <td>2</td>
        </tr>
    </table>
</div>​

Answer 3

您可以完全嵌套表格，也可以使用表格进行布局。或者，您可以使用标记应该如何使用它，并通过做正确的事情来享受它的所有劳动成果（可访问性、语义、可用性等）。您可以通过 td 元素上的 colspan="" 属性更改列。 http://www.w3.org/TR/html-markup/td.html