如何在行中创建具有不同数量的单元格的表？

Question

我的想法一般：我的HTML Table里面有自定义行。这是类似的例子：

第1行中的第2个单元格 - Shold是行的40％左右，第1行的第6个单元格应该是双重

第2行的第8个细胞应该大~40％

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

我尝试了十几种带有colspan和宽度百分比的变体，但对我来说没什么用。 这是我最新的结果：

<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>

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

Answer 1

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

这样的表构建生成器

Answer 2

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

Answer 3

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