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

Question

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

Answer 1

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

如您所述:

In the sample code I expect the backgroung image (a 6px wide black bar) to display in the 1,2 and 4th TBODY and not the 3rd.

和:

FireFox on Mac and OK on Edge on Win10

不在<tbody>中添加背景图片，先在<td>中添加即可每行的元素。

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