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-table。因此，您无法覆盖特定单元格。

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

＆＃13;

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

＆＃13;

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

＆＃13;

或使用嵌套表：

＆＃13;

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

＆＃13;

<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>

＆＃13;

如何单独为单个单元格提供边界间距0？

1 个答案: