2

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

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

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

4

3 回答 3

5

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

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

于 2012-04-29T03:23:25.923 回答
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>​
于 2012-04-29T03:23:43.247 回答
1

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

于 2012-04-29T04:30:17.083 回答