如何在HTML表格单元格交叉处绘制圆形？技术实现咨询

要在HTML表格的单元格交叉位置（即单元格角落的边框交点）放置圆形，可以通过CSS绝对定位+相对定位的方式解决位置偏移问题，具体方案如下：

核心思路 #

1. 表格设置border-collapse: separate（不能用collapse，否则单元格边框合并，交叉点没有空间放置圆形）
2. 给单元格<td>设置position: relative，作为圆形元素的定位参考容器
3. 用独立元素（或伪元素）绘制圆形，通过绝对定位的top/left偏移，让圆形刚好落在单元格的边框交叉点

方案1：使用独立<span>标签实现 #

HTML代码 #

<table>
  <tr>
    <td><span class="cross-dot"></span>单元格内容1</td>
    <td><span class="cross-dot"></span>单元格内容2</td>
  </tr>
  <tr>
    <td><span class="cross-dot"></span>单元格内容3</td>
    <td><span class="cross-dot"></span>单元格内容4</td>
  </tr>
</table>

CSS代码 #

table {
  border-collapse: separate;
  border-spacing: 0;
  border: none;
}
td {
  border: 1px solid #333;
  padding: 18px;
  position: relative;
}
.cross-dot {
  display: block;
  width: 12px;
  height: 12px;
  background-color: #333;
  border-radius: 50%;
  position: absolute;
  /* 向上、向左偏移圆形半径，让中心落在交叉点 */
  top: -6px;
  left: -6px;
}

方案2：使用伪元素实现（无需额外标签） #

如果不想添加多余的<span>标签，可以用单元格的::before伪元素：

CSS代码（HTML结构和方案1一致，无需加span） #

table {
  border-collapse: separate;
  border-spacing: 0;
  border: none;
}
td {
  border: 1px solid #333;
  padding: 18px;
  position: relative;
}
td::before {
  content: "";
  display: block;
  width: 12px;
  height: 12px;
  background-color: #333;
  border-radius: 50%;
  position: absolute;
  top: -6px;
  left: -6px;
}

调整说明 #

• 如果需要在其他角落（如右下角）放置圆形，只需修改定位属性：

  /* 右下角交叉点 */
  top: calc(100% - 6px);
  right: -6px;
  left: auto;
  

• 可以通过修改width/height调整圆形大小，同时同步修改top/left的偏移值（保持为圆形半径的负值）

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