能否为table边框添加文本？棋盘编号布局技术咨询

首先明确：无法直接给CSS border属性添加文本内容——border仅负责设置边框的样式、颜色与宽度，不支持嵌入文字。要实现真实棋盘的坐标标记（A-H字母、1-8数字），有两种常用方案：

方案一：修改HTML结构，新增行列（推荐） #

这种方法语义化清晰，支持交互，是最通用的实现方式。你可以在原8×8棋盘的外围新增一行用于放置顶部/底部字母，新增一列用于放置左侧/右侧数字：

修改后的HTML代码 #

<table class="chess-board">
  <!-- 顶部字母行 -->
  <tr class="coord-row">
    <td class="empty-cell"></td>
    <td>A</td>
    <td>B</td>
    <td>C</td>
    <td>D</td>
    <td>E</td>
    <td>F</td>
    <td>G</td>
    <td>H</td>
  </tr>
  <!-- 第8行棋盘 -->
  <tr>
    <td class="coord-col">8</td>
    <td class="ivory">A8</td>
    <td class="brown">B8</td>
    <td class="ivory">C8</td>
    <td class="brown">D8</td>
    <td class="ivory">E8</td>
    <td class="brown">F8</td>
    <td class="ivory">G8</td>
    <td class="brown">H8</td>
  </tr>
  <!-- 第7行棋盘 -->
  <tr>
    <td class="coord-col">7</td>
    <td class="brown">A7</td>
    <td class="ivory">B7</td>
    <td class="brown">C7</td>
    <td class="ivory">D7</td>
    <td class="brown">E7</td>
    <td class="ivory">F7</td>
    <td class="brown">G7</td>
    <td class="ivory">H7</td>
  </tr>
  <!-- 剩余6行代码以此类推，coord-col的数字依次为6、5、4、3、2、1 -->
  <!-- 底部字母行（可选） -->
  <tr class="coord-row">
    <td class="empty-cell"></td>
    <td>A</td>
    <td>B</td>
    <td>C</td>
    <td>D</td>
    <td>E</td>
    <td>F</td>
    <td>G</td>
    <td>H</td>
  </tr>
</table>

补充CSS样式 #

.chess-board {
  margin: 60px auto;
  background: black;
  border: 40px ridge beige;
  border-collapse: collapse; /* 确保单元格边框合并 */
}

.coord-row td, .coord-col {
  width: 60px;
  height: 40px;
  text-align: center;
  font-size: 16px;
  font-weight: bold;
  background-color: beige;
}

.empty-cell {
  background-color: transparent; /* 左上角空白单元格透明 */
}

/* 保留原ivory和brown样式 */
.ivory {
  width: 60px;
  height: 60px;
  background-color: ivory;
  font-size: 12px;
  vertical-align: bottom;
}

.brown {
  width: 60px;
  height: 60px;
  background-color: brown;
  font-size: 12px;
  vertical-align: bottom;
}

方案二：用CSS伪元素定位（无需修改原HTML） #

如果不想改动现有HTML结构，可以通过相对定位+伪元素实现纯展示的坐标标记，缺点是无法支持交互：

修改后的HTML（仅新增容器） #

<div class="board-container">
  <table class="frame">
    <!-- 原8×8棋盘代码不变 -->
  </table>
</div>

补充CSS样式 #

.board-container {
  position: relative;
  margin: 60px auto;
  width: fit-content;
}

/* 左侧数字标记 */
.board-container::before {
  content: "8\A7\A6\A5\A4\A3\A2\A1";
  white-space: pre;
  position: absolute;
  left: -30px;
  top: 50%;
  transform: translateY(-50%);
  font-size: 16px;
  font-weight: bold;
  line-height: 60px; /* 与单元格高度匹配 */
  text-align: center;
}

/* 底部字母标记 */
.board-container::after {
  content: "A B C D E F G H";
  white-space: pre;
  position: absolute;
  bottom: -30px;
  left: 50%;
  transform: translateX(-50%);
  font-size: 16px;
  font-weight: bold;
  letter-spacing: 48px; /* 调整间距适配单元格宽度 */
  text-align: center;
}

/* 保留原frame、ivory、brown样式 */
.frame {
  margin: 0; /* 移除原margin，由容器控制 */
  background: black;
  border: 40px ridge beige;
}

.ivory {
  width: 60px;
  height: 60px;
  background-color: ivory;
  font-size: 12px;
  vertical-align: bottom;
}

.brown {
  width: 60px;
  height: 60px;
  background-color: brown;
  font-size: 12px;
  vertical-align: bottom;
}

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