Question

我正在尝试在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>

Answer 1

执行此操作的最佳方法是向表格添加背景颜色，并为字段添加前景色。见下文

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>

Answer 2

单元格之间的空间就是表格。您可以使用与任何其他元素相同的方式更改表格的背景。

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

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>

Answer 3

从另一种方法来看，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》这本书时，该书在 ch9 中提到，使用 border-collapse: collapse; 会导致使用 IE/Edge 在垂直边框上出现空白间距。

Answer 4

添加以下css并尝试

ALTER SCHEMA TempSchema TRANSFER UsualSchema.BigTable
ALTER SCHEMA UsualSchema TRANSFER EmptySchema.BigTable
ALTER SCHEMA EmptySchema TRANSFER TempSchema.BigTable

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

4 个答案: