Question

我希望我的数据有一个类似的html（想象标题在值上方对齐）

header1 header2 header3

列出项目1

value111 value112 value113

value121 valueb122 valueb123
列出第2项

value211 value212 value213

value221 valueb222 valueb223

我希望这些值成为列表块的一部分，因此我可以在点击时显示/隐藏内容（折叠）。此外，我希望动态决定每个“列”的宽度，以适应最长的值（可能具有最小宽度）

Answer 1

不幸的是，HTML表模型非常简单，它不允许您输入行组的标题，这似乎是列表项所需要的，或多或少。我们需要假一点：我们使用tbody元素形成行组，并使用组中的第一行作为组头。该行将在一个跨越所有列的单元格中包含标题。

以下示例具有最小样式和一种（相当笨拙）的方法来制作可以使用的行组标题控件，以便关闭和关闭组中数据行的显示。这只是一个演示，表明这样的事情是可行的，没有将列表标记与表标记混合（并且，就此而言，根本不使用列表标记）。

function toggleData(el) {
   el.parentNode.parentNode.className =
     el.parentNode.parentNode.className ? '' : 'hide';
}

tbody > tr:first-child > td:before {
  content: '\2022';
  padding-right: 0.25em;
}
tbody.hide > tr:not(:first-child) {
  display: none;
}

<table border cellspacing=0>
<thead>
  <tr><th>header1 <th>header2 <th>header3
</thead>
<tbody>
  <tr><td colspan=3 onclick="toggleData(this)">List item 1
  <tr><td>value111 <td>value112 <td>value113
  <tr><td>value121 <td>valueb122 <td>valueb123
</tbody>
<tbody>
  <tr><td colspan=3 onclick="toggleData(this)">List item 2
  <tr><td>value211 <td>value212 <td>value213
  <tr><td>value221 <td>valueb222 <td>valueb223
</tbody>
</tabe>

以表格布局列出数据

1 个答案: