思路及实现步骤：
① 用普通的 div 模拟 table 标签，用于装载构成表格的子元素：
.Tab {
margin: auto;
width: 740px;
}
② 用 grid 网格布局的 div 模拟 tr 标签即表格的行：
.Tr {
padding: 0;
display: grid; /* 网格布局 */
grid-template-columns: 80px 280px 120px auto; /* n行*4列 */
}
③ 用 span 模拟 td 即最终表格单元格（列）：
/* .Tr 直系 span : 模拟 td */
.Tr > span {
padding: 4px 8px;
border: 1px solid green; /* 统一边框样式 */
border-width: 1px 0 0 1px; /* 再将右、下设置为0 */
min-height: 20px; /* 最低高度 */
display: grid; /* 网格布局 : 方便将来设置内元素对齐 */
place-items: center start; /* 子元素默认对齐方式 : 左对齐、垂直居中 */
}
这样的 span 会得出如下所示的单元格半成品：
当多个这样的半成品按一定规则左右并排、上下排列组合起来，它们能组合成一个差不多的表格形状，只差最右边的和最底部的边框线。所以我们还需要——
④ 用伪类 last-of-type 设置 .Tr 的最后一个 span 拥有右边边框：
/* .Tr 最后一个直系 span 边框 */
.Tr > span:last-of-type {
border-right-width: 1px;
}
⑤ 继续用伪类 last-of-type 设置 .Tab 的最后一个 div 的所有直系 span 子元素拥有底边边框：
/* .Tab 最后一个 div 的直系 span 边框 */
.Tab > div:last-of-type > span {
border-bottom-width: 1px;
}
最后，作为示范，我们将表格最左列设置为其内内容绝对居中：
/* .Tr 第一个直系 span 的子元素绝对居中 */
.Tr > span:first-of-type {
place-items: center;
}
如此，table 的核心部分就模拟出来了，以上的CSS可以驱使下面的HTML代码构成一张表格：
<div class="Tab">
<div class="Tr">
<span>1</span>
<span></span>
<span></span>
<span></span>
</div>
<div class="Tr">
<span>2</span>
<span></span>
<span></span>
<span></span>
</div>
<div class="Tr">
<span>3</span>
<span></span>
<span></span>
<span></span>
</div>
</div>
最终效果演示如下：
这样做出的模拟表格，由于单元格是用 span 标签做的，根据HTML规范，里面如果套用 div、p 标签，将被视为不合法，亦即 span 的级层太小不能包裹 div 和 p 等块状层级标签，不过呢也可以使用，但不建议这么做，可以考虑用 br 标签换行。此外，本帖仅作为表格模拟示范，很多功能性和修饰性的细节设置没有做细，实际使用是需要完善。
发表于 2022-10-27 16:48
提升卡
置顶卡
沉默卡
喧嚣卡
变色卡
千斤顶
显身卡
楼主
发表于 2022-10-27 19:29
