TBODY 背景图像也不适用于所有 TD 元素，如何解决？

Posted 2023-03-05

【中文标题】TBODY 背景图像也不适用于所有 TD 元素，如何解决？

【英文标题】：TBODY background-image gets improperly applied to all TD elements too, how to fix?

【发布时间】：2016-10-28 08:43:23

【问题描述】：

在 CSS 中声明的 TBODY 背景图像正在应用于 TBODY 中的所有 TD 元素，预计将仅应用于 TBODY。

重现：创建一个包含多个 tbody 的表格，每个 tbody 包含一些行和单元格。用 CSS 声明一个 TBODY 背景图像。我期望的结果是 TBODY 应该显示单个图像作为背景。然而，在 Chrome、Safari、Opera 中，对于 TBODY 中的每个 TD，背景图像也重复（在 Mac 上测试，截至本文发布日期的最新浏览器版本）。它在 Mac 上的 FireFox 和 Win10 上的 Edge 上都能按预期呈现。

在示例代码中，我希望背景图像（一个 6 像素宽的黑条）显示在第 1,2 和第 4 个 TBODY 而不是第 3 个。发生这种情况，但看到黑条背景图像也应用于 TD 元素，这是不好的。这不是预期的行为，因为我希望背景图像位于 TBODY 容器元素的左侧。

有解决办法吗？ TBODY 是我想要利用的元素，因为它允许定义背景图像的单个声明以跨越 tbody 中的所有行，使其美观且合乎逻辑。

这似乎是一个 Chromium 错误：https://bugs.chromium.org/p/chromium/issues/detail?id=35697

JSFiddle：https://jsfiddle.net/acyeheq6/

table 
  border-collapse: separate;
  border-spacing: 0;
  width: 100%;

tbody.tb1  background-color: lightblue; 
tbody.tb2  background-color: lightgray; 
tbody td  padding-left: 15px; 
tbody.item 
  background-repeat: no-repeat;
  background-image: url(http://dummyimage.com/6x80/000/fff.png);
  background-position: left top;

<table>	 
  <tbody class="item tb1">
    <tr>
      <td>6/22/16</td>
      <td>Lorem Ipsum</td>
      <td>Temporibus autem</td>
    </tr>
    <tr>
      <td colspan="3">Itaque earum rerum hic tenetur</td>
    </tr>
  </tbody>
  <tbody class="item tb2">
    <tr>
      <td>6/19/16</td>
      <td>Lorem Ipsum</td>
      <td>Temporibus autem</td>
    </tr>
    <tr>
      <td colspan="3">Finibus Bonorum et Malorum</td>
    </tr>
  </tbody>
  <tbody class="tb1">
    <tr>
      <td>6/18/16</td>
      <td>Expedita distinctio</td>
      <td>Deserunt mollitia</td>
    </tr>
    <tr>
      <td colspan="3">Doloribus asperiores repellat.</td>
    </tr>
  </tbody>
  <tbody class="item tb2">
    <tr>
      <td>6/17/16</td>
      <td>Lorem Ipsum</td>
      <td>Temporibus autem</td>
    </tr>
    <tr>
      <td colspan="3">similique sunt in culpa qui officia</td>
    </tr>
  </tbody>
</table>

【问题讨论】：

强制性“我不敢相信它甚至可以在 Microsoft Edge 中使用”备注。

【参考方案1】：

这是 Chrome 中 <tbody> 中 background-image 的错误。 所以，我认为你可能会改变你的方法来实现目标。

如你所述：

在示例代码中，我希望背景图像（一个 6 像素宽的黑条）显示在第 1,2 和第 4 个 TBODY 而不是第 3 个。

还有：

Mac 上的 FireFox 和 Win10 上的 Edge 上 OK

不在<tbody> 中添加背景图片，只需将其添加到每行的第一个<td> 元素中。

解决方案：将 CSS 选择器 tbody.item 更改为 tbody.item > tr > td:first-child