div+span模拟表格
<style>.papa {}
.papa > p { padding: 8px 0; }
.sBorder { border: 1px solid green; border-width: 1px 0 0 1px; width: 120px; height: 30px; display: block;}
.Tab { margin: auto; width: 740px; }
.Tr { padding: 0; display: grid; grid-template-columns: 80px 280px 120px auto; }
.Tr > span { padding: 4px 8px; border: 1px solid green; border-width: 1px 0 0 1px; min-height: 20px; display: grid; place-items: center start;}
.Tr > span:last-of-type { border-right-width: 1px; }
.Tab > div:last-of-type > span { border-bottom-width: 1px; }
.Tr > span:first-of-type { place-items: center; }
</style>
<div class="papa">
<p>思路及实现步骤：</p>
<p>① 用普通的 div 模拟 table 标签，用于装载构成表格的子元素：</p>
<pre><span style="color: red;">.Tab </span>{
<span style="color: blue;">margin</span>: auto;
<span style="color: blue;">width</span>: 740px;
}
</pre>
<p>② 用 grid 网格布局的 div 模拟 tr 标签即表格的行：</p>
<pre><span style="color: red;">.Tr </span>{
<span style="color: blue;">padding</span>: 0;
<span style="color: blue;">display</span>: grid; <span style="color: green">/* 网格布局 */</span>
<span style="color: blue;">grid-template-columns</span>: 80px 280px 120px auto; <span style="color: green">/* n行*4列 */</span>
}
</pre>
<p>③ 用 span 模拟 td 即最终表格单元格（列）：</p>
<pre><span style="color: green">/* .Tr 直系 span <span style="color: blue;"></span>: 模拟 td */</span>
<span style="color: red;">.Tr > span </span>{
<span style="color: blue;">padding</span>: 4px 8px;
<span style="color: blue;">border</span>: 1px solid green; <span style="color: green">/* 统一边框样式 */</span>
<span style="color: blue;">border-width</span>: 1px 0 0 1px; <span style="color: green">/* 再将右、下设置为0 */</span>
<span style="color: blue;">min-height</span>: 20px; <span style="color: green">/* 最低高度 */</span>
<span style="color: blue;">display</span>: grid; <span style="color: green">/* 网格布局 <span style="color: blue;"></span>: 方便将来设置内元素对齐 */</span>
<span style="color: blue;">place-items</span>: center start; <span style="color: green">/* 子元素默认对齐方式 <span style="color: blue;"></span>: 左对齐、垂直居中 */</span>
}
</pre>
<p>这样的 span 会得出如下所示的单元格半成品：</p>
<span class="sBorder"></span>
<p>当多个这样的半成品按一定规则左右并排、上下排列组合起来，它们能组合成一个差不多的表格形状，只差最右边的和最底部的边框线。所以我们还需要——</p>
<p>④ 用伪类 last-of-type 设置 .Tr 的最后一个 span 拥有右边边框：</p>
<pre><span style="color: green">/* .Tr 最后一个直系 span 边框 */</span>
<span style="color: red;">.Tr > <span style="color: blue;">span</span>:last-of-type </span>{
<span style="color: blue;">border-right-width</span>: 1px;
}
</pre>
<p>⑤ 继续用伪类 last-of-type 设置 .Tab 的最后一个 div 的所有直系 span 子元素拥有底边边框：</p>
<pre><span style="color: green">/* .Tab 最后一个 div 的直系 span 边框 */</span>
<span style="color: red;">.Tab > <span style="color: blue;">div</span>:last-of-type > span </span>{
<span style="color: blue;">border-bottom-width</span>: 1px;
}
</pre>
<p>最后，作为示范，我们将表格最左列设置为其内内容绝对居中：</p>
<pre><span style="color: green">/* .Tr 第一个直系 span 的子元素绝对居中 */</span>
<span style="color: red;">.Tr > <span style="color: blue;">span</span>:first-of-type </span>{
<span style="color: blue;">place-items</span>: center;
}
</pre>
<p>如此，table 的核心部分就模拟出来了，以上的CSS可以驱使下面的HTML代码构成一张表格：</p>
<pre><<span style="color:darkred">div</span> <span style="color: red">class</span><span style="color: blue">=</span><span style="color: magenta">"Tab"</span>>
<<span style="color:darkred">div</span> <span style="color: red">class</span><span style="color: blue">=</span><span style="color: magenta">"Tr"</span>>
<<span style="color:darkred">span</span>>1<<span style="color: darkred">/span</span>>
<<span style="color:darkred">span</span>><<span style="color: darkred">/span</span>>
<<span style="color:darkred">span</span>><<span style="color: darkred">/span</span>>
<<span style="color:darkred">span</span>><<span style="color: darkred">/span</span>>
<<span style="color: darkred">/div</span>>
<<span style="color:darkred">div</span> <span style="color: red">class</span><span style="color: blue">=</span><span style="color: magenta">"Tr"</span>>
<<span style="color:darkred">span</span>>2<<span style="color: darkred">/span</span>>
<<span style="color:darkred">span</span>><<span style="color: darkred">/span</span>>
<<span style="color:darkred">span</span>><<span style="color: darkred">/span</span>>
<<span style="color:darkred">span</span>><<span style="color: darkred">/span</span>>
<<span style="color: darkred">/div</span>>
<<span style="color:darkred">div</span> <span style="color: red">class</span><span style="color: blue">=</span><span style="color: magenta">"Tr"</span>>
<<span style="color:darkred">span</span>>3<<span style="color: darkred">/span</span>>
<<span style="color:darkred">span</span>><<span style="color: darkred">/span</span>>
<<span style="color:darkred">span</span>><<span style="color: darkred">/span</span>>
<<span style="color:darkred">span</span>><<span style="color: darkred">/span</span>>
<<span style="color: darkred">/div</span>>
<<span style="color: darkred">/div</span>>
</pre>
<p>最终效果演示如下：<br><br></p>
<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>
<p><br>这样做出的模拟表格，由于单元格是用 span 标签做的，根据HTML规范，里面如果套用 div、p 标签，将被视为不合法，亦即 span 的级层太小不能包裹 div 和 p 等块状层级标签，不过呢也可以使用，但不建议这么做，可以考虑用 br 标签换行。此外，本帖仅作为表格模拟示范，很多功能性和修饰性的细节设置没有做细，实际使用是需要完善。</p>
</div>
本帖作为应用实例已收入 网格布局入门学习 <div class="Tab">
<h2 style="text-align: center; padding: 4px;">div+span表格实例</h2>
<div class="Tr">
<span>1</span>
<span>★★★★★</span>
<span></span>
<span></span>
</div>
<div class="Tr">
<span>2</span>
<span><i>插入 i 标签设定斜体</i></span>
<span></span>
<span></span>
</div>
<div class="Tr">
<span>3</span>
<span><span style="color:red">插入span标签设定文本颜色</span></span>
<span></span>
<span></span>
</div>
<div class="Tr">
<span>4</span>
<span><strong>插入strong标签设置粗体</strong></span>
<span></span>
<span></span>
</div>
<div class="Tr">
<span>5</span>
<span>这里测试长度较大的文本以撑宽表格单元格：“grid网格布局+伪类”模拟 table 表格效果咋样？</span>
<span></span>
<span></span>
</div>
<p style="text-align: right;padding: 2px 6px;">制表时间: 2022年10月26日</p>
</div> 本帖实例表格完整代码：
<style>
/* 模拟table的父元素 */
.Tab {
margin: auto;
width: 740px;
}
/* 模拟 tr 的子元素 */
.Tr {
padding: 0;
display: grid; /* 网格布局 */
grid-template-columns: 80px 280px 120px auto; /* n行*4列 */
}
/* .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; /* 子元素默认对齐方式 : 左对齐、垂直居中 */
}
/* .Tr 最后一个直系 span 边框 */
.Tr > span:last-of-type {
border-right-width: 1px;
}
/* .Tab 最后一个 div 的直系 span 边框 */
.Tab > div:last-of-type > span {
border-bottom-width: 1px;
}
/* .Tr 第一个直系 span 文本绝对居中 */
.Tr > span:first-of-type {
place-items: center;
}
</style>
<div class="Tab">
<h2 style="text-align: center; padding: 4px;">div+span表格</h2>
<div class="Tr">
<span>1</span>
<span>★★★★★</span>
<span></span>
<span></span>
</div>
<div class="Tr">
<span>2</span>
<span><i>插入 i 标签设定斜体</i></span>
<span></span>
<span></span>
</div>
<div class="Tr">
<span>3</span>
<span><span style="color:red">插入span标签设定文本颜色</span></span>
<span></span>
<span></span>
</div>
<div class="Tr">
<span>4</span>
<span><strong>插入strong标签设置粗体</strong></span>
<span></span>
<span></span>
</div>
<div class="Tr">
<span>5</span>
<span>这里测试长度较大的文本以撑宽表格单元格：“grid网格布局+伪类”模拟 table 表格效果咋样？</span>
<span></span>
<span></span>
</div>
<p style="text-align: right;padding: 2px 6px;">制表时间: 2022年10月26日</p>
</div>
今天是27日呢，俺写成昨天的日期了{:4_170:} 要懂得适用输入法的时间输入：
rq → 2022年10月27日 俺是学不会了{:4_187:} 千羽 发表于 2022-10-27 19:29
俺是学不会了
学不会就老老实实用电子表格 竖向是可以自动撑开的吧。 “右、下设置为0”是防止线条叠加吧，只在最后补上了。 马黑黑 发表于 2022-10-27 19:51
学不会就老老实实用电子表格
也不会{:4_203:} 千羽 发表于 2022-10-27 20:25
也不会
那就看看 红影 发表于 2022-10-27 19:59
“右、下设置为0”是防止线条叠加吧，只在最后补上了。
依据“素材”和目标结构而定 红影 发表于 2022-10-27 19:56
竖向是可以自动撑开的吧。
看代码能知道，看效果更能知道 马黑黑 发表于 2022-10-27 20:56
那就看看
嗯，欣赏你们的精彩{:4_187:} 千羽 发表于 2022-10-27 20:59
嗯，欣赏你们的精彩
没有精彩，只有过程。精彩的不是结果，是过程。 马黑黑 发表于 2022-10-27 21:00
没有精彩，只有过程。精彩的不是结果，是过程。
不会的人就只能看结果了{:4_181:} 千羽 发表于 2022-10-27 21:03
不会的人就只能看结果了
就像化妆一样道理吧？不会化妆的人，就看看别人的化妆结果，会化妆的人，化妆过程才是最享受的，虽然化妆的结果也能给自己添彩。 马黑黑 发表于 2022-10-27 21:07
就像化妆一样道理吧？不会化妆的人，就看看别人的化妆结果，会化妆的人，化妆过程才是最享受的，虽然化妆 ...
嗯，是这样的，黑黑老师阐述得很清楚的{:4_181:} 千羽 发表于 2022-10-27 21:10
嗯，是这样的，黑黑老师阐述得很清楚的
{:4_190:}