1

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

手风琴本质上在当前行下方添加了另一个表格行，该行有一个 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>

4

2 回答 2

0

简短的回答是“不”，仅使用 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>

于 2013-04-23T14:57:33.663 回答
0

使用以下 CSS 重置您的表格：

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

然后你必须设置<td>s的宽度

于 2013-04-23T14:55:13.220 回答