6

我想使用详细信息标签来隐藏和展开表格中的一整行，所以我目前有代码

           <table border="1">
                <tr>
                    <td>Header 1 </td>
                    <td>Header 2 </td>
                    <td>Header 3 </td>
                </tr>

                <tr>
                    <td>Content 1 </td>
                    <td>Content 2 </td>
                    <td>Content 3 </td>
                </tr>

                <details>
                    <tr>
                        <td>Hidden Content 1 </td>
                        <td>Hidden Content 2 </td>
                        <td>Hidden Content 3 </td>
                    </tr>
                </details>
            </table>

展开详细信息标签时，它会生成“隐藏”行，但在一列中，而不是原始表中的全部 3 列。我也尝试将标签放在行内，但我遇到了同样的问题

                    <tr><details>
                        <td>Hidden Content 1 </td>
                        <td>Hidden Content 2 </td>
                        <td>Hidden Content 3 </td>
                        </details>
                    </tr>

有没有人也遇到过这个问题并设法解决了？

4

3 回答 3

5

将要隐藏的内容放在一个新的中table，然后将标签包裹起来details：

table {
  width: 300px;
}
<table border="1">
  <tr>
    <td>Header 1 </td>
    <td>Header 2 </td>
    <td>Header 3 </td>
  </tr>

  <tr>
    <td>Content 1 </td>
    <td>Content 2 </td>
    <td>Content 3 </td>
  </tr>
</table>
<details>
  <table border="1">
    <tr>
      <td>Hidden Content 1 </td>
      <td>Hidden Content 2 </td>
      <td>Hidden Content 3 </td>
    </tr>
  </table>
</details>

于 2017-07-28T15:01:23.497 回答
1

我在代码中添加了一个摘要标签，似乎可以工作。

table {
  width: 300px;
}
<table border="1">
  <tr>
    <td>
      <details>
        <summary>Header 1</summary>
        Hidden Content 1
      </details>
    </td>
    <td>
      <details>
        <summary>Header 2</summary>
        Hidden Content 2
      </details>
    </td>
    <td>
      <details>
        <summary>Header 3</summary>
        Hidden Content 3
      </details>
    </td>
  </tr>
</table>

于 2022-02-16T02:20:49.587 回答
1

<detail>将s 作为直接子级是无效的 HTML ： <table>, <thead>, <tbody>, <tfoot>, <tr>. 但是，将任何内容放在<td>.

下面的例子有一个扩展<td>的 a colspan，"3"它使它成为唯一一个<tr>边到边占据它的单元格，并且从所有意图和目的来看，它看起来像 a <details>as a <tr>。里面<details>是三个<section>s。

的<details>hasdisplay: table-row将使行为表现为<tr>. 三个<section>s 有display: table-cell- 它们的行为就像<td>. 最后，它<details>被包裹在一个<table>（信不信由你它是 100% 有效的 HTML）中。big 的样式<table>也适用于 mini <table>，注意三个<section>s 内的内容是完美的 33/33/33。这全是 HTML 和 CSS，没有 JavaScript。

*, *::before, *::after { box-sizing: border-box; }
:root { font: 1ch/1 'Segoe UI'; }
html, body { width: 100%; min-height: 100%; margin: 0; padding: 0; }
body { display: flex; flex-flow: row nowrap; justify-content: center; align-items: center; font-size: 1.75rem; }
main { width: 100%; height: 100%; margin: 0 auto; }
table { table-layout: fixed; width: 100%; border-collapse: collapse; border: 2px inset grey; }
th, td { width: 33%; height: 30px; border: 1px solid black; }
caption, th { font-variant: small-caps; }
caption { font-size: 2.5rem; font-weight: 900; }
td::before, td::after { content: '\0a\0a\0a'; }
details { display: table-row; }
summary { font-weight: 700; cursor: pointer; }
section { display: table-cell; width: 33%; padding: 5px 3px; border: 1px solid black; }
<main>
<table>
<caption>Data Table</caption>
<thead><tr>
<th>Alpha</th>
<th>Beta</th>
<th>Gamma</th>
</tr></thead>
<tbody>
<tr><td></td><td></td><td></td></tr>
<tr><td></td><td></td><td></td></tr>
<tr><td></td><td></td><td></td></tr>
<tr><td colspan='3'>
<table>
<details>
  <summary>More Nfo</summary>
  <section>
  Ierd lait Klarinett vu rou. Vu der Benn aremt, mä ons Halm alles Minutt. De fond rëschten schaddreg rëm. Sou un stét esou, vun fu ma'n Mier gréng. Keng schéi Gaart wee de, nei ké Ierd löschteg.
  </section>
  <section>
  Net d'Leit iwerall schnéiwäiss de, nei main jeitzt hu. Mä Haus stét vun, as Blieder d'Kirmes dir, un frou Säiten laanscht wéi.
  </section>
  <section>
An kille zielen dämpen och. Hun Dall Mecht Klarinett da, dan Fuesent d'Blumme schaddreg um, all vill Gaas Hierz an. Wou d'Sonn d'Vullen hu. Mir Kënnt d'Gaassen un, wéi um botze d'Pied heescht. 
</section>
</details>
</table>
</td></tr>
<tr><td></td><td></td><td></td></tr>
<tr><td></td><td></td><td></td></tr>
<tr><td></td><td></td><td></td></tr>
<tr><td></td><td></td><td></td></tr>
</tbody>
<tfoot>
<tr><td></td><td></td><td></td></tr>
</tfoot>
</table>
</main>

于 2022-02-16T04:05:16.553 回答