html - 以表格布局列出数据

Question

我希望我的数据有一个呈现类似的 html(假设标题在值上方对齐)

标题 1 标题 2 标题 3

• 列出元素 1

  值(value)111 值(value)112 值(value)113

  值121 值b122 值b123

• 列出元素 2

  值(value)211 值(value)212 值(value)213

  值221 值b222 值b223

我希望这些值成为列表 block 的一部分，这样我就可以在单击时显示/隐藏内容(折叠)。此外，我希望动态决定每个“列”的宽度，以容纳最长的值(可能具有最小宽度)

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>