用html+css动态创建无边框表格答案

【问题标题】：dynamically create borderless table with html+css用html+css动态创建无边框表格
【发布时间】：2021-11-04 12:56:03
【问题描述】：

我有一个动态创建的表。该表将始终具有相同的大小，但为了更简洁的代码，我不喜欢静态创建。我知道如何使用静态表来实现这一点。

我想创建一个如下所示的表： table

我有表类，作为参考，我将它称为表类。我也有 td 类，名为“activeCell”。

我想做什么：

为每个 td 添加 id，然后为每个 id 创建一个自定义 css。
使用“.activeCell:nth-child()” - 但它为列本身设置样式，而不仅仅是单元格 (=td)。
将 ID 应用到每个单元格，然后使用“.activeCell#id”，但我写的不是 id，而是单元格的实际 ID。没有明显的变化。
使用“td:nth-child()” - 没有明显变化。

我也在使用 Angular。如果更方便或更容易实现，我可以使用 mat-table 或 bootstrap（但我不知道用这些设置表格样式）

我真的很感谢你的帮助。

我的html代码：

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

我的CSS：

  .activeCell{
    width: 100px;
    height: 100px;
    cursor: pointer;
    border-top: 2px solid black;
    border-right: 2px solid black;
  }
  .activeCell:hover{
    background: rgb(79, 77, 223)
  }
  .miniGame{
    border-collapse: collapse;
  }

【问题讨论】：

你能告诉我们你的代码吗？
当然，我现在添加了它们。

标签： javascript html css angular bootstrap-4

【解决方案1】：

:first-child 和 :last-child 是一种方法：

table{ 
  border-collapse: collapse; 
}

/* set borders on the table cells, not the table: */
td {border: 2px solid; width: 30px; height:30px;}

/* remove borders from top and bottom rows: */
tr:first-child  td {border-top: none}
tr:last-child  td {border-bottom: none}

/* remove borders from first and last columns: */
td:first-child  {border-left: none}
td:last-child  {border-right: none}

<table>
  <tr>
    <td></td><td></td><td></td>
  </tr>
  <tr>
    <td></td><td></td><td></td>
  </tr>
  <tr>
    <td></td><td></td><td></td>
  </tr>
</table>

【讨论】：