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

Posted 2023-03-06

【中文标题】响应式表格，可以继承嵌套表格单元格的宽度

【英文标题】：Responsive table, possible for nested table cell widths to inherit

【发布时间】：2013-04-16 20:17:03

【问题描述】：

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

六角琴实质上是在当前行下方添加另一个表格行，该行有一个 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】：

简短的回答是“不”，仅使用 HTML/CSS 是不可能的。我自己正在研究一个带有可调整大小列的固定标题、可滚动表格，以及双击列标题边框以自动调整。它远未完成，我可以告诉你，如果这大致是你前进的方向，你可能想深呼吸。

以下更新

从截图来看，有没有考虑修改HTML结构？

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

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

【讨论】：

啊我想很多人会误解我，这个jsfiddle实际上只是为了显示表格的结构，我实际表格的每一行在单元格中都有不同的内容，所以表格六角手风琴内部并不真正知道要制作什么宽度的单元格

那么在这种情况下，我可以先问一下为什么需要这种嵌套的表结构，而不是将它作为一个表吗？

我添加了我网站的屏幕截图给你看，你有什么建议？因为它需要是一个手风琴系统

我明白了。简短的回答是“不”，仅使用 HTML/CSS 是不可能的。我自己正在研究一个带有可调整大小列的固定标题、可滚动表格，以及双击列标题边框以自动调整。它远未完成，我可以告诉你，如果这大致是你前进的方向，你可能想深呼吸。

是的，我是这么认为的！已经深吸了几口气……！谢谢你的帮助

【参考方案2】：

使用这段 CSS 重置表格：

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

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

【讨论】：

我认为这不能解决我的问题，正如我所说，我的 jsfiddle 并不能真正代表我的网站，只是为了展示我的 html 结构

您可以为每个table 中的每个<td> 赋予class 之类的column-1、column-2 等。然后相应地设置宽度。

此外，子表应设置为拉伸其 80% 宽父表的全部 100%。