html - 如何单独为单个单元格提供 border-spacing 0？

Question

我有一个这样的表:

<table>
  <tr>
    <td>11</td>
    <td>12</td>
    <td>13</td>
  </tr>
  <tr>
    <td class="new">21</td>
    <td>22</td>
    <td>23</td>
  </tr>
</table>

表格的border-spacing是2px，如下所示:

table {
    border-spacing: 2 2;
}

我希望单元格 21 和 22 之间的间距为 0。 所以我尝试了:

table td.new {
    border-spacing: 0 2;
}

但是不起作用。有什么想法吗？

Answer 1

恐怕这是不可能的。

border-spacing 和/或 border-collapse 属性仅适用于 table 和 inline-tables。因此，您不能针对特定单元格覆盖它。

如果你想合并这两个单元格，你可以使用 colspan

table{
  border-spacing: 2px 2px;
  border: 1px solid;
}

td {
  border: 1px solid gray;
}

<table>
  <tr>
    <td>11</td>
    <td>12</td>
    <td>13</td>
  </tr>
  <tr>
    <td colspan="2">21 22</td>
    <td>23</td>
  </tr>
</table>

或者使用嵌套表格:

body > table {
  border-spacing: 2px 2px;
  border: 1px solid;
}

td {
  border: 1px solid gray;;
}

table table {
  border-spacing: 0;
}

<table>
  <tr>
    <td>11</td>
    <td>12</td>
    <td>13</td>
  </tr>
  <tr>
    <td colspan="2">
      <table>
        <tr>
          <td>21</td>
          <td>22</td>
        </tr>
      </table>
    </td>
    <td>23</td>
  </tr>
</table>