如何不修改HTML结构通过CSS将嵌套列表展示为表格效果

实现方案 #

你之前的问题根源是：直接把所有li设置为table-row后，li内部的所有直接子元素（包括嵌套的ul）都会被识别为当前行的单元格，因此子列表会被挤到同一行的右侧。
以下是纯CSS实现方案，无需修改任何HTML结构：

/* 清除默认列表样式 */
ul, li {
  list-style: none;
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

/* 所有列表设为表格容器 */
ul {
  display: table;
  width: 100%;
  border-collapse: collapse;
  border: 1px solid black; /* 可选：表格外边框 */
}

/* 列表项设为表格行组，内部子单元格会自动生成匿名行包裹 */
li {
  display: table-row-group;
}

/* 直接从属li的span设为单元格 */
li > span {
  display: table-cell;
  padding: 4px 10px;
  border: 1px solid green; /* 可选：单元格边框 */
}

/* 嵌套列表独占新行，加缩进实现层级效果 */
li > ul {
  width: 100%;
  padding-left: 2em; /* 调整该数值可修改层级缩进大小 */
}

/* 计数类列右对齐，固定宽度排版更整齐 */
.clientcount, .fblcount, .statuscount {
  text-align: right;
  width: 60px;
}

该方案实现逻辑是把每个li作为独立的表格行组，li下的span会自动组成第一行，嵌套的ul作为单独的块占满整行宽度换行展示，同时通过缩进保留层级关系，完全匹配你期望的效果。

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