如何创建具有不同行数的单元格的表格？答案

【问题标题】：How to create table with different number of cells in the rows?如何创建具有不同行数的单元格的表格？
【发布时间】：2014-01-07 21:19:51
【问题描述】：

我的总体想法：我有 HTML 表格，里面有自定义行。这是类似的例子：

第 1 行的第 2 个单元格 - 应该占行的 40%，第 1 行的第 6 个单元格应该是双倍的

第 2 行的第 8 个单元格应该大 ~ 40%

基本上这 2 行在我的表中重复。每个第二行可折叠，并在单击第一行的第一个单元格时折叠。问题是当我折叠并返回我的表格时，我的表格会改变列的大小并且我的屏幕一直在跳跃。我希望这些行始终是相同的结构，但由于我有响应设计，我不想为每个单元格设置确切的宽度。

我已经尝试了十几种带有 colspan 和 % of width 的变体，但对我来说没有任何用处。这是我的最新结果：

<tr class="mattersRow">

    <td colspan="4">
        <a href="#collapse63" data-toggle="collapse"></a>
    </td>
    <td class="editableCell qbmatter" colspan="14"></td>
    <td class="editableCell workDate" colspan="4"></td>
    <td class="editableCell hours" colspan="2"></td>
    <td class="editableCell person" colspan="6"></td>
    <td class="rate" colspan="2"></td>
    <td class="editableCell amount" colspan="4"></td>
    <td align="center"></td>

</tr>
<tr id="collapse63" class="helpRow in" style="height: auto;">

    <td colspan="2"></td>
    <td colspan="2"></td>
    <td colspan="2"></td>
    <td colspan="4"></td>
    <td colspan="2"></td>
    <td colspan="4"></td>
    <td colspan="2"></td>
    <td colspan="16"></td>
    <td colspan="4"></td>

</tr>

你能帮我正确地构建这些行吗...

【问题讨论】：

必须是表格吗？ Div 更现代，可以更轻松地做到这一点，尽管您可以使用 NESTED TABLES 实现您所追求的目标。如，较小的行应该是父表中它们自己的表。
我会使用嵌套表。

标签： html css html-table

【解决方案1】：

您在正确的轨道上，但表格的设计是让行和列在相同的位置结束，因此第一行第二个单元格右侧的一点额外空间要么是需要大量的工作来复制，或者让它们排列起来会容易得多。否则，您将开始进入嵌套表，这将比它的价值更多。你总是可以使用像TableGenerator这样的表格生成器

【讨论】：

感谢您的链接！很有帮助=)

【解决方案2】：

要获得这种变化，您需要有 2 个不同的表，因为它会尝试对齐 td 的

【讨论】：

【解决方案3】：

我强烈建议将它们放入带有样式的 div 中。很明显，您没有将它们用于表格数据 - 因为您将其用于布局，所以我建议您查看这个问题 here。这可以通过一些简单的 css 相对容易地实现。

【讨论】：