Angular环境下如何用HTML+CSS实现指定样式的动态无边框表格

核心问题说明 #

你之前的方案不生效主要有两个原因：

• nth-child()选择器仅匹配同一父元素下的同级元素，单独写.activeCell:nth-child(n)会匹配每一行下的第n个td，自然会选中整列
• ID选择器无效果大概率是CSS优先级冲突，或者样式规则写错、放置位置错误（比如写在全局CSS和组件样式冲突）

下面给你两种最简便的实现方案，不需要引入mat-table、bootstrap额外依赖：

方案1：纯CSS精准控制单个单元格样式 #

如果要实现3x3九宫格的标准边框样式，或者给固定位置的单元格设置特殊样式，直接在CSS里同时限定行和列的位置即可：

/* 原有样式保留 */
.activeCell{
  width: 100px;
  height: 100px;
  cursor: pointer;
  border: 2px solid black;
}
.activeCell:hover{
  background: rgb(79, 77, 223)
}
.miniGame{
  border-collapse: collapse;
}

/* 新增规则：精准控制边框，实现井字格效果 */
/* 第一行所有单元格移除上边框 */
.miniGame tr:first-child .activeCell {
  border-top: none;
}
/* 最后一行所有单元格移除下边框 */
.miniGame tr:last-child .activeCell {
  border-bottom: none;
}
/* 每行第一个单元格移除左边框 */
.miniGame tr .activeCell:first-child {
  border-left: none;
}
/* 每行最后一个单元格移除右边框 */
.miniGame tr .activeCell:last-child {
  border-right: none;
}

/* 示例：单独给第一行第一列的单元格设置特殊背景 */
.miniGame tr:nth-child(1) .activeCell:nth-child(1) {
  background: #f0f0f0;
}

如果要定位任意单个单元格，只要按tr:nth-child(行号) .activeCell:nth-child(列号)的格式写选择器即可。

方案2：纯动态绑定（完全不写固定CSS选择器） #

如果要根据业务逻辑动态给任意单元格加样式，直接扩展你已有的ngClass绑定即可：

1. 先给grid里的每个cell对象新增customStyle字段，存储你要绑定的样式类名
2. 修改td的ngClass绑定逻辑：

<td 
  class="activeCell" 
  *ngFor='let cell of grid | slice:0:3; let i=index' 
  (click)='markCell(cell.id)'
  id={{cell.id}}
  [ngClass]="[cell.customStyle, {inactive: !cell.isActive}]"
>
  {{ cell.value }} A
</td>

3. 在CSS里写对应样式类的规则即可，完全不需要写死选择器，所有样式完全通过TS里的cell对象控制。

代码优化建议 #

你当前的HTML写死了3行tr，可以简化为动态生成行，后期修改尺寸更方便：

<table class="miniGame">
  <tr *ngFor="let rowIdx of [0,1,2]">
    <td 
      class="activeCell" 
      *ngFor='let cell of grid | slice: rowIdx*3 : rowIdx*3 +3; let i=index' 
      (click)='markCell(cell.id)'
      id={{cell.id}}
      [ngClass]="{inactive: !cell.isActive}"
    >
      {{ cell.value }} {{ 'ABC'[rowIdx] }}
    </td>
  </tr>
</table>

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