纯CSS实现带首列缩进、可折叠的动态宽度表格方案问询

核心实现思路 #

结合原生<details>实现折叠逻辑，用CSS Grid布局管控列宽，通过层级类给首列添加缩进，同时用CSS变量灵活控制动态列宽。

示例HTML结构 #

（可通过JSON遍历生成，嵌套层级对应缩进层级）

<entry-group>
  <details>
    <summary>
      <entry class="level-0">
        <A>主条目1</A>
        <B>固定宽1</B>
        <C>自适应列</C>
        <D>自适应列</D>
      </entry>
    </summary>
    <sub-entries>
      <entry class="level-1">
        <A>子条目1-1</A>
        <B>固定宽2</B>
        <C>自适应内容1</C>
        <D>自适应内容2</D>
      </entry>
      <details>
        <summary>
          <entry class="level-1">
            <A>子条目1-2（可折叠）</A>
            <B>固定宽3</B>
            <C>自适应内容3</C>
            <D>自适应内容4</D>
          </entry>
        </summary>
        <sub-entries>
          <entry class="level-2">
            <A>孙条目1-2-1</A>
            <B>固定宽4</B>
            <C>自适应内容5</C>
            <D>自适应内容6</D>
          </entry>
        </sub-entries>
      </details>
    </sub-entries>
  </details>
</entry-group>

CSS代码实现 #

/* 容器基础样式 */
entry-group {
  display: block;
  width: 100%;
  max-width: 1200px;
  margin: 0 auto;
}

/* 四列网格布局定义 */
entry {
  display: grid;
  /* 列规则：首列自适应内容+缩进，第二列固定宽，第三、四列用CSS变量控制宽度 */
  grid-template-columns: auto 120px var(--col3-width, 1fr) var(--col4-width, 2fr);
  gap: 12px;
  align-items: center;
  padding: 10px 0;
  border-bottom: 1px solid #e5e7eb;
}

/* 首列缩进：按层级递增 */
entry.level-1 > A {
  padding-left: 28px;
}
entry.level-2 > A {
  padding-left: 56px;
}
entry.level-3 > A {
  padding-left: 84px;
}

/* 折叠组件样式重置与自定义 */
details {
  margin: 0;
}
summary {
  list-style: none;
  cursor: pointer;
}
summary::-webkit-details-marker {
  display: none;
}
/* 纯CSS折叠箭头图标 */
summary::before {
  content: "▸";
  display: inline-block;
  width: 18px;
  text-align: center;
  margin-right: 6px;
  transition: transform 0.2s;
}
details[open] summary::before {
  transform: rotate(90deg);
}

sub-entries {
  margin-top: 8px;
}

关键功能说明 #

1. 折叠功能：利用原生<details>/<summary>实现无JS折叠，点击summary即可展开/收起<sub-entries>内的子条目。
2. 首列缩进：给不同嵌套层级的<entry>添加level-n类，仅对第一列<A>设置padding-left，其他列保持对齐，层级在JSON转HTML时自动生成。
3. 动态宽度控制：通过CSS变量--col3-width和--col4-width灵活调整自适应列：
   • 固定宽度：entry-group { --col3-width: 350px; }
   • 比例分配：保持默认1fr/2fr，或自定义比例如--col4-width: 1.5fr
   • 单独行调整：给特定<entry>加内联样式style="--col3-width: 400px;"
4. JSON转HTML逻辑：递归遍历JSON嵌套结构，每个条目生成<entry>标签；存在子条目时用<details>包裹，同时根据嵌套深度添加level-n类（顶级为level-0，每嵌套一层n+1）。

内容的提问来源于stack exchange，提问作者Sam Coutteau