我有一个响应式表格,每一行都有不同的内容,每一行都有一个 Accordion 机构。
Concertina 实质上是在当前行下方添加了另一个表格行,其中有一个 td 和一个 colspan,表示表格中的单元格数量。
在这个六 Angular Accordion 中,我有另一个表格,我需要表格单元格与父表格对齐。我明白这可能仅靠 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>
最佳答案
简短的回答是“否”,仅使用 HTML/CSS 是不可能的。我自己正在研究一个固定标题、可滚动的表格,其中包含可调整大小的列,再加上双击列标题边框以自动调整。它远未完成,我可以告诉你这是否是你可能前进的大致方向,你可能需要深吸一口气。
以下更新
从截图来看,你考虑过修改HTML结构吗?
从下面的标记中,您有多个 <tbody>
部分,每个部分都有第一个 <tr>
包含 <th>
元素。其余的将显示详细信息数据,行 <tr>
包含典型的 <td>
元素。
在 jQuery 中,您可以使用 $('tr:has(th)')
选择标题行,然后 $('tr:has(td)')
选择数据行。
最后<th>
header 中的将包含您的“更多/更少”控件,它仅显示/隐藏后续数据行。
这对你有用吗?
<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>
关于javascript - 响应式表格,嵌套表格单元格宽度可以继承,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/16172356/