在处理大型数据表格时，一次显示所有可用信息往往会使得表格显得过于拥挤且难以阅读。因此，通常我们会隐藏次要信息，并采用一种这样的设计模式，在需要时才显示更多的细节。

良好的用户体验（UX）很大程度上取决于数据表的设计，特别是在处理高容量数据或复杂数据时。根据如《为什么表格设计的用户体验很重要？》和《设计更好的数据表》等文章，主要存在以下三种方法来管理这些隐藏细节：

• 可展开行 – 展开表格行以显示更多详细信息。
• 模态视图 – 打开一个模态对话框以提供更详细的信息。
• 快速视图（侧边栏） – 快速侧边栏视图，侧边栏会从边缘滑出。

本文将向你展示如何灵活调整这三项设置，这样你就可以在它们之间切换时而无需重写表格的HTML代码。

我们将这样来使用气泡提示，它们非常适合直接附加信息到特定的行上。

此处省略内容

首先，我们将按照A Guide to Styling Tables中的相同标记和样式使用：

在最后一个单元格的文本内容后，我们添加了一个简单的按钮（图标来自tabler），该按钮会触发一个弹出提示。

<button type="button" popovertarget="p1"></button> (这是一个按钮，用于触发弹出窗口，其目标标识为“p1”。)

切换到全屏，退出全屏

接下来，我们在适当的位置插入一个气泡提示，以便在触发时显示额外信息：

    <div id="p1" popover>
      ... 示例内容 ...   
    </div>

全屏模式 退出全屏

对于气泡提示的样式，我们将使用亚当·阿尔格莱的这个弹出框代码模板。该模板包含平滑的出现和消失效果。

    .selector {
      &, &::backdrop {
        transition: 
          display 0.5s allow-discrete, 
          overlay 0.5s allow-discrete, 
          inset 0.5s,
          scale 0.5s,
          opacity 0.5s; // 过渡时间设置
        opacity: 0; // 初始透明度
      }

      &::backdrop {
        background: #0002; 
      }

      &:popover-open { // 弹出打开状态
        opacity: 1; // 完全不透明
        &::backdrop {
          opacity: 0.5; // 半透明
        }
      }

      @starting-style { // 起始样式
        &:popover-open,
        &:popover-open::backdrop {
          opacity: 0; // 初始透明度
        }
      }
    }

全屏查看 退出全屏

模态窗口

对于模态窗口，我们将添加一个 --modal 修饰类来定义模态的大小，并将其居中显示在屏幕上：

    &.--modal {
      block-size: calc(100dvh - 2em);
      inline-size: calc(100dvw - 2em);
      inset-block-start: 1em;
      inset-inline: 1em;
      transform-origin: 50% 50%;

      @starting-style {
        &:popover-open {
          scale: 0;
        }
      }
    }

全屏模式, 退出全屏

……

快速查看（边栏）

为了创建快速查看侧边栏，我们将添加一个新的修饰类 --inline-start 给弹出窗口。它会从视口的一侧滑入，并可以通过平滑的动画来关闭。设置如下：

    &.--inline-start {
      --width: clamp(220px, 33vw, 350px); /* 设置宽度为220px至350px之间，最小为220px，最大为350px，中间值为33vw */
      block-size: calc(100dvh - 2em); /* 设置block-size为100dvh减去2em */
      inline-size: var(--width); /* 设置inline-size为自定义的宽度变量 */
      inset-block-start: 1em; /* 设置块的开始内边距为1em */
      inset-inline: 1em; /* 设置内边距为1em */

      @starting-style {
        &:popover-open {
          inset-inline: calc(0px - var(--width)); /* 当弹出层打开时，设置内边距为0减去宽度变量 */
        }
      }
      &[popover]:not(:popover-open) { 
        inset-inline: calc(0px - var(--ui-width)); /* 当弹出层关闭时，设置内边距为0减去ui宽度变量 */
      }
    }

切换到全屏 退出全屏

这样设置后，弹出框会从左边滑进来。&[popover]:not(:popover-open)这个条件确保当关闭时它会滑出去。

我们可以类似地调整，来实现从右边滑入或从上方和下方滑入的效果：

内联结束标记 (--inline-end)

（点击图片查看详细内容）

区块结束 (--block-end)

最后，我们来看看可展开行。与弹出框和侧边栏不同，可展开行直接融入表格布局中。传统上，通常会有一个隐藏的<tr>，其中包含一个跨越所有列的<td>，并通过一个JavaScript函数来控制其显示与隐藏。

但是我们可以重复使用现有的气泡提示来直接行内扩展吗？不能直接做到——但我们可以通过将气泡提示定位到行的下方来模拟类似的效果。

首先，我们将弹出框附在表格行左下角的位置，通过在<tr>标签上设置锚点名称属性，并应用以下CSS样式：

    .selector {
      inset-block: auto anchor(底);
      inset-inline: anchor(左);
    }

全屏显示 开启全屏 关闭全屏

接下来，我们需要两个特性，不过这两个特性目前仅在Chrome浏览器中可用。

.selector {
  interpolate-size: allow-keywords;
  width: anchor-size(width); /* 宽度使用锚点尺寸 */
}

点击全屏模式，点击退出全屏

interpolate-size 属性允许弹出框平滑地调整到其最终高度，而 anchor-size 使其宽度与行匹配（或使用 anchor-size(height) 与高度匹配）。

目前为止，一切顺利，但展开的行遮挡了下面的行。

我们可以通过将 popover 的高度加到展开行中表格单元格的 padding-block-end 中的值来解决这个问题。

太好了！幻象完成了！

为了使高度动起来，我们在CSS里加几个额外的声明，例如添加一些额外的声明：

    .--expandable {
      transition: height 0.25s;
      /* 开始样式 */
      @starting-style {
        &:popover-open{
          height: 0;
        }
      }
      &[popover]:not(:popover-open) { 
        height: 0;
      }
      &:popover-open {
        height: max-content;
      }
    }

全屏 退出全屏

为了避免手动更新填充空间，我们可以使用一个根据弹出框的高度动态更新填充空间的脚本。

    document
      .querySelectorAll(".selector")
      .forEach((popover) => {
        const trigger = document.querySelector(
          `[popovertarget="${popover.id}"]`
        );
        const row = trigger.closest("tr");

        row.style.setProperty("--anchorName", `--${popover.id}`);
        popover.style.setProperty("--positionAnchor", `--${popover.id}`);

        const initialPadding = parseFloat(
          getComputedStyle(row.cells[0]).paddingBlockEnd
        );

        popover.addEventListener("toggle", (event) => {
          const rowHeight =
            initialPadding +
            (event.newState === "open"
              ? popover.offsetHeight
              : 0);
          row.style.setProperty("--row", `${rowHeight}px`);
        });
      });

进入全屏模式，退出全屏模式

此脚本监听弹出框的toggle事件，动态更新自定义属性--row，使其在弹出框打开时与弹出框的高度保持一致。

你可以在这里查看演示 浏览器样式/界面/表格展开，你还可以在那里找到 原始表格演示。