Question

我有一个响应表，每行有不同的内容，每行有一个六角琴机制。

六角琴基本上在当前行下方添加了另一个表格行，其中有一个td，其中包含表格中单元格数量的colspan。

在这个六角手风琴里面，我有另一个表，我需要表格单元格与父表格对齐。我很欣赏这可能不单独使用HTML / CSS而且可能需要用JS完成？

还是有另一种方式吗？

我无法在此发布所有代码，但这里是我的意思的截图

enter image description here

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

Answer 1

使用这个CSS重置表：

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

然后你必须设置<td> s

的宽度

Answer 2

简短的回答是'不'，不能用HTML / CSS。我自己正在使用具有可调整大小的列的固定标题，可滚动表格，以及双击列标题边框以自动调整。它还远未完成，我可以告诉你，如果这大致是你可能会前进的方向，你可能需要深呼吸。

以下更新

从屏幕截图来看，您是否考虑过修改HTML结构？

从下面的标记中，您有多个<tbody>个部分，每个部分都有一个包含<tr>元素的第一个<th>。其余的将显示详细数据，<tr>行包含典型的<td>元素。

在jQuery中，您可以使用$('tr:has(th)')选择标题行，使用$('tr:has(td)')选择数据行。

标题中的最后一个<th>将包含“更多/更少”控件，它只显示/隐藏后续数据行。

这会对你有用吗？

<table class="master-table">
    <tbody class="concertina">
        <tr>
            <th>Header 1</th>
            <th>Header 2</th>
            <th>Header 3</th>
            <th>Header 4</th>
            <th>Header 5</th>
            <th>Header 6</th>
            <th>More</th>
        </tr>
        <tr>
            <td>Cell 1</td>
            <td>Cell 2</td>
            <td>Cell 3</td>
            <td>Cell 4</td>
            <td>Cell 5</td>
            <td colspan="2">Cell 6</td>
        </tr>
    </tbody>
    <tbody class="concertina">
        <tr>
            <th>Header 1</th>
            <th>Header 2</th>
            <th>Header 3</th>
            <th>Header 4</th>
            <th>Header 5</th>
            <th>Header 6</th>
            <th>More</th>
        </tr>
        <tr>
            <td>Cell 1</td>
            <td>Cell 2</td>
            <td>Cell 3</td>
            <td>Cell 4</td>
            <td>Cell 5</td>
            <td colspan="2">Cell 6</td>
        </tr>
    </tbody>
</table>

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

2 个答案: