如何在无内容HTML表格中绘制水平线？及实现跨TD1至TD4的无内容CSS水平线

我来帮你搞定这两个问题，一步步说清楚：

一、无内容的HTML表格中绘制水平线 #

无内容的表格分两种场景，对应的实现方式略有不同：

• 完全空的表格（没有<tr>/<td>）：直接给表格设置宽度、高度和底部边框，就能显示一条水平线：

<table style="width: 100%; height: 1px; border-bottom: 1px solid black;"></table>

• 有行但单元格为空的表格：可以给<tr>添加底部边框，或者给<td>设置边框。注意有些浏览器对空单元格的边框渲染不太友好，加个 占位会更稳妥：

<!-- 方法1：给<tr>加边框 -->
<table style="width: 100%;">
  <tr style="border-bottom: 1px solid black;">
    <td>&nbsp;</td>
    <td>&nbsp;</td>
  </tr>
</table>

<!-- 方法2：给<td>加边框 -->
<table style="width: 100%; border-collapse: collapse;">
  <tr>
    <td style="border-bottom: 1px solid black;">&nbsp;</td>
    <td style="border-bottom: 1px solid black;">&nbsp;</td>
  </tr>
</table>

二、实现从TD1延伸至TD4的进度条效果（不用外部CSS） #

你想要的是步骤进度条样式——四个圆圈连在一条水平线上，不用外部CSS的话，用内联样式就能实现。核心思路是：利用表格行的边框做贯穿的水平线，再用白色背景的圆形覆盖住单元格内的边框，只保留圆圈之间的连线。

修改后的代码如下：

<table style="border-collapse: collapse; width: 100%;">
  <tr style="border-bottom: 1px solid black;">
    <!-- 步骤1 -->
    <td style="text-align: center; padding: 10px 0; position: relative;">
      <div style="width: 24px; height: 24px; border-radius: 50%; background: white; border: 1px solid black; display: flex; align-items: center; justify-content: center; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%);">
        <span id="progressindex">1</span>
      </div>
    </td>
    <!-- 步骤2 -->
    <td style="text-align: center; padding: 10px 0; position: relative;">
      <div style="width: 24px; height: 24px; border-radius: 50%; background: white; border: 1px solid black; display: flex; align-items: center; justify-content: center; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%);">2</div>
    </td>
    <!-- 步骤3 -->
    <td style="text-align: center; padding: 10px 0; position: relative;">
      <div style="width: 24px; height: 24px; border-radius: 50%; background: white; border: 1px solid black; display: flex; align-items: center; justify-content: center; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%);">3</div>
    </td>
    <!-- 步骤4 -->
    <td style="text-align: center; padding: 10px 0; position: relative;">
      <div style="width: 24px; height: 24px; border-radius: 50%; background: white; border: 1px solid black; display: flex; align-items: center; justify-content: center; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%);">4</div>
    </td>
  </tr>
</table>

关键细节说明： #

• border-collapse: collapse：让表格单元格的边框合并，保证水平线是连续的。
• 给<tr>设置border-bottom：这就是贯穿四个单元格的基础水平线。
• 圆形div用position: absolute和transform居中，白色背景刚好覆盖住所在位置的水平线，形成“圆圈在线上”的效果，相邻圆圈之间的水平线自然保留，完美实现进度条样式。

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