表中不同行的不同td宽度？

Question

快速问题：如何实现这一目标？ （见下图）

在普通html和css中设置td宽度展位无效。

td宽度可以变化，但每行只有相同的宽度。

Answer 1

使用三个单独的<table>块，每个块的一行包含三列不同宽度的列。

Answer 2

我不相信它可以轻松地在一张桌子上。

相反，您必须使用colspan属性来重叠不同行上的单元格。

例如，使用6列，第一行将具有colspan = 2，td，colspan = 2

第二行将有td，td colspan = 2，td等等。

它非常混乱 - 您可能需要考虑以不同的方式显示数据，例如，使用DIV

Answer 3

要查看的内容很多，但您需要一个包含三行的父表，其中每行包含另一个包含三列的表：

<table>
    <tr>
        <td>
            <table>
                <tr>
                    <!-- Set Width of Individual Cells Here -->
                    <td>
                    </td>
                    <td>
                    </td>
                    <td>
                    </td>
                </tr>
            </table>
        </td>
    </tr>
    <tr>
        <td>
            <table>
                <tr>
                    <!-- Set Width of Individual Cells Here -->
                    <td>
                    </td>
                    <td>
                    </td>
                    <td>
                    </td>
                </tr>
            </table>
        </td>
    </tr>
    <tr>
        <td>
            <table>
                <tr>
                    <!-- Set Width of Individual Cells Here -->
                    <td>
                    </td>
                    <td>
                    </td>
                    <td>
                    </td>
                </tr>
            </table>
        </td>
    </tr>
</table>

这是a working jsFiddle to illustrate。

Answer 4

取3个主表和3个tr，并在每个tr中取另一个子表，其中3列比应用css

Answer 5

如果没有这个子表格，它实际上是可能的。我现在把它作为我布局中的一个错误。试试玩细胞内的填充和边距:(

“Bug”在多个浏览器中保持一致。

编辑： 找到那个。

td { display: block; }

不要在家里做。