Javascript 响应表，嵌套表单元格宽度可以继承

我有一个响应表，每行有不同的内容，每行有一个协奏曲机制

concertina本质上是在当前行的下面添加另一个表行，该行具有一个td，该td带有表中单元格数量的colspan

在这个协奏曲中，我有另一个表格，我需要表格单元格与父表格对齐。我明白这可能是不可能的HTML/CSS单独和可能需要做的JS

还是有别的办法

我不能在这里发布我所有的代码，但这里有一个我的意思截图

<table class="parent-table">
<tr>
    <td>Cell 1</td>
    <td>Cell 2</td>
    <td>Cell 3</td>
    <td>Cell 4</td>
    <td>Cell 5</td>
    <td>Cell 6</td>
</tr>
<tr>
    <td colspan="6" class="concertina">
        <div>
            <table>
                <tr>
                    <td>Other 1</td>
                    <td>Other 2</td>
                    <td>Other 3</td>
                    <td>Other 4</td>
                    <td>Other 5</td>
                    <td>Other 6</td>
                </tr>
            </table>
        </div>
    </td>
</tr>

第1单元
第2单元
第三单元
第4单元
第5单元
第6单元
其他1
其他2
其他3
其他4
其他5
其他6

---

使用以下CSS重置表格：

table {
    border-collapse: collapse;
    border-spacing: 0;
}

---

然后您必须设置

s

的宽度。简短的回答是“否”，仅使用HTML/CSS是不可能的。我自己正在处理一个固定标题、可滚动的表格，其中包含可调整大小的列，并双击列标题边框进行自动调整。这还远远没有完成，我可以告诉你，如果这大概是你可能要去的方向，你可能想深呼吸

以下更新

从截图判断，您是否考虑过修改HTML结构

从下面的标记中，您有多个

部分，每个部分都有包含

元素的第一个

。其余部分将显示详细数据，即包含典型

元素的

行

在jQuery中，可以使用

$（'tr:has（th）

选择标题行，使用

$（'tr:has（td）'）

选择数据行

标题中的最后一个

将包含“更多/更少”控件，该控件仅显示/隐藏后续数据行

这对你有用吗

标题1
标题2
标题3
标题4
标题5
标题6
更多
第1单元
第2单元
第三单元
第4单元
第5单元
第6单元
标题1
标题2
标题3
标题4
标题5
标题6
更多
第1单元
第2单元
第三单元
第4单元
第5单元
第6单元

我不认为这能解决我的问题，因为我说过我的JSFIDLE并不能真正代表我的网站，只是为了展示我的HTML的结构。你可以给每个

表中的
一个
类
，类似
列-1
，
列-2
等。然后相应地设置宽度。另外，子表应该设置为拉伸其80%宽的父表的100%。啊，我想很多人会误解我，这个JSFIDLE实际上只是为了显示表的结构，我实际表的每一行的单元格中都有不同的内容，因此，协奏曲中的桌子并不知道它的“细胞膨胀”的宽度。在这种情况下，我可以首先问一下，为什么你需要这种嵌套的桌子结构，而不是将它作为一张桌子？我添加了一个我的网站截图，向你展示，你有什么建议？因为它需要一个协奏曲系统，我明白了。简短的回答是“不”，仅仅使用HTML/CSS是不可能的。我自己正在处理一个固定标题、可滚动的表格，其中包含可调整大小的列，并双击列标题边框进行自动调整。这还远远没有完成，我可以告诉你，如果这大概是你可能要去的方向，你可能想深呼吸。是的，我想是的！已经做了几次深呼吸。。。！谢谢你的帮助