如何使用HTML与CSS实现第一列带箭头样式的自定义表格？

你可以通过CSS伪元素实现第一列的上下箭头效果，无需引入额外图片，且支持自定义中间文字，完全适配你现有表格结构：

第一步：更新CSS样式 #

在原有样式基础上添加以下代码：

/* 箭头单元格专用样式 */
.arrow-cell {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  align-items: center;
  padding: 8px 0;
  /* 继承原有深色背景和白色文字 */
  background-color: rgb(97, 97, 97) !important;
  color: white;
}
/* 上箭头样式 */
.arrow-cell::before {
  content: "";
  width: 0;
  height: 0;
  border-left: 12px solid transparent;
  border-right: 12px solid transparent;
  border-bottom: 12px solid #fff;
}
/* 下箭头样式 */
.arrow-cell::after {
  content: "";
  width: 0;
  height: 0;
  border-left: 12px solid transparent;
  border-right: 12px solid transparent;
  border-top: 12px solid #fff;
}

需要调整箭头大小时直接修改伪元素的border参数即可，修改border的颜色值即可更换箭头颜色。

第二步：调整表格HTML结构 #

给跨10行的第一列th添加arrow-cell类，中间填入你需要显示的任意自定义文字：

<table class="table-bordered border-dark">
   <tr class="table-rowspan border-dark">
       <th rowspan="10" class="table-rowspan border-dark arrow-cell">
          <!-- 此处替换为你需要的文字 -->
          自定义文字
       </th>
       <th></th>
   </tr>
   <tr>
      <td>1</td>
   </tr>
   <tr>
      <td>2</td>
   </tr>
   <!-- 剩余表格行保持原有逻辑不变 -->
   <tr>
      <td>9</td>
   </tr>
</table>

后续如果修改第一列的跨行行数，不需要额外调整样式，箭头会自动适配单元格高度，固定显示在上下两端。

内容的提问来源于stack exchange，提问作者Trường Giang Nguyễn