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元素上使用via colspan =“”属性更改列。 http://www.w3.org/TR/html-markup/td.html

HTML表格，每行中包含不同数量的单元格：如何在单元格中均匀分隔单元格？

3 个答案: