javascript - 将网格布局应用于表时出现间隙

将表格应用于表格时，与使用border-spacing指定边框（最新的Firefox）时，边距的扩展程度更大

在mdn中，border-spacing为0，并且实际上指定了margin，所以我认为计算值没有区别

https://developer.mozilla.org/en-US/docs/Web/CSS/border-spacing#Specifications


  初始值0


为什么是这样？

table,
td {
  border: 1px solid red;
}

tr {
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-gap: 10px;
  margin: 50px 10px;
}

tr:nth-of-type(2) {
  margin-left: 0;
  /* However, there is a gap on the left and right */
  margin-right: 0;
}

<table class="ex2">
  <tr>
    <td>Cell1</td>
    <td>Cell2</td>
  </tr>
  <tr>
    <td>Cell3</td>
    <td>Cell4</td>
  </tr>
</table>

最佳答案

在mdn中，border-spacing为0，并且实际上指定了margin，所以我认为计算值没有区别


是的，MDN描述是正确的，border-spacing属性的初始值为0 [1]。

但是，这是规范中的初始值，并且用户代理样式表实际上可在浏览器[2]中工作。

通过阅读编写为HTML标准中用作用户代理样式表的CSS，您可以看到table元素具有CSS border-spacing: 2px [3]。并且，如果您使用开发人员工具进行检查，则可以看到此CSS也已应用于Firefox中的table元素。


  14.3.9表[3]
  
  

/* ... */
table {
  box-sizing: border-box;
  border-spacing: 2px;
  border-collapse: separate;
  text-indent: initial;
}
/* ... */

因此，可以通过将border-spacing属性的2px重置为table元素中的初始值0来解决此问题。

table {
  border-spacing: 0; /* add this */
}

table,
td {
  border: 1px solid red;
}

tr {
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-gap: 10px;
  margin: 50px 10px;
}

tr:nth-of-type(2) {
  margin-left: 0;
  margin-right: 0;
}

<table>
  <tr>
    <td>Cell1</td>
    <td>Cell2</td>
  </tr>
  <tr>
    <td>Cell3</td>
    <td>Cell4</td>
  </tr>
</table>