如何使用 CSS 在 HTML 中单元格之间的边框间距中填充颜色答案

【问题标题】：How to fill color in border spacing between cells in HTML using CSS如何使用 CSS 在 HTML 中单元格之间的边框间距中填充颜色
【发布时间】：2017-02-11 04:28:15
【问题描述】：

我正在尝试在 html 中表格的垂直单元格间距（列）之间填充黑色，但无法弄清楚如何做到这一点。这是我的代码

table,
th,
td {
  border-collapse: separate;
  border-spacing: 2px;
  border-style: solid;
  border-width: thin;
}

<table>
  <tr>
    <th>Heading One</th>
    <th>Heading Two</th>
    <th>Heading Three</th>
  </tr>

  <tr>
    <td>Apple</td>
    <td>10</td>
    <td>$1.0</td>
  </tr>

  <tr>
    <td>Mango</td>
    <td>12</td>
    <td>$2.0</td>
  </tr>
</table>

【问题讨论】：

标签： css html colors html-table

【解决方案1】：

单元格之间的空间是表格。您可以像更改任何其他元素一样更改表格的背景。

注意，表格单元格的默认背景颜色是透明的。

table,
th,
td {
  border-collapse: separate;
  border-spacing: 2px;
  border-style: solid;
  border-width: thin;
}

table {
   background-color: black;
}

td, th {
  background-color: white;
}

<table>
  <tr>
    <th>Heading One</th>
    <th>Heading Two</th>
    <th>Heading Three</th>
  </tr>

  <tr>
    <td>Apple</td>
    <td>10</td>
    <td>$1.0</td>
  </tr>

  <tr>
    <td>Mango</td>
    <td>12</td>
    <td>$2.0</td>
  </tr>
</table>

【讨论】：

【解决方案2】：

添加下面的css试试看，

 table, th, td
{
  border-collapse: separate;
    border-spacing:2px;
    border-style: solid;
    border-width:thin;    
    background-color:White;    
}
table
{
  background-color:Black;
}

【讨论】：

【解决方案3】：

最好的方法是为表格添加背景颜色，为字段添加前景色。见下文

table, th, td
{
  border-collapse: separate;
    border-spacing:2px;
    border-style: solid;
    border-width:thin;
}
table{background:#000;}
tr{background: #fff;}

<table>
<tr><th>Heading One</th>
    <th>Heading Two </th>
    <th>Heading Three </th>
</tr>

<tr>
<td>Apple</td>
<td>10</td>
<td>$1.0</td>
</tr>

<tr>
<td>Mango</td>
<td>12</td>
<td>$2.0</td>
</tr>
</table>

【讨论】：

【解决方案4】：

从另一种方法来看，border-collapse 不必分开，折叠值也可以。可以通过改变border-width的值来改变边框的大小。

table,
th,
td {
  border-collapse: collapse;
  border-width: 4px;
  border-style: solid;
  border-color: #000;
}

tr{background: #eee;}

<table>
  <tr>
    <th>Heading One</th>
    <th>Heading Two</th>
    <th>Heading Three</th>
  </tr>

  <tr>
    <td>Apple</td>
    <td>10</td>
    <td>$1.0</td>
  </tr>

  <tr>
    <td>Mango</td>
    <td>12</td>
    <td>$2.0</td>
  </tr>
</table>

2021 年 5 月 13 日更新

当我通读 CSS Mastery Advanced Web Standards Solution, 3rd 3 一书时，该书在第 9 章中提到，使用border-collapse: collapse; 可能会导致使用 IE/Edge 的垂直边框出现空白。

【讨论】：