CSS 表格行背景色与表格背景色

Posted 2023-05-08

【中文标题】CSS 表格行背景色与表格背景色

【英文标题】：CSS Table-Row Backcolor vs Table Backcolor

【发布时间】：2015-08-15 23:19:42

【问题描述】：

我遇到了 CSS 问题。 我列出了 div 标签。 问题是： .table-cell 后面是 .table-row，这就是为什么我认为 .table-cell 的背景颜色是黄色，然后是灰色。

但是当我将border-top-left-radius 应用于.table-cell 时，蓝色穿过角落，而不是灰色。 As you can see here.我在 Windows 8.1 上使用 Google Chrome 43.0。

<div class="table">
  <div class="table-row">
    <div class="table-cell">Row 1 - Cell 1</div>
    <div class="table-cell">Row 1 - Cell 2</div>
    <div class="table-cell">Row 1 - Cell 3</div>
    <div class="table-cell">Row 1 - Cell 4</div>
  </div>
  <div class="table-row">
   <div class="table-cell">Row 2 - Cell 1</div>
    <div class="table-cell">Row 2 - Cell 2</div>
    <div class="table-cell">Row 2 - Cell 3</div>
    <div class="table-cell">Row 2 - Cell 4</div>
  </div>
</div>

CSS 代码如下所示：

.table 
  display:table;
  background-color:blue;


.table-row 
  display:table-row;
  background-color:gray;



.table-cell 
  display:table-cell;
  background-color: yellow;
  border-top-left-radius: 10px;

【问题讨论】：

预期输出是什么

我希望角落的颜色是灰色的。但它们是蓝色的。

只有灰色，我没看到蓝色.. 我用的是 mozilla

你是对的，mozilla 是灰色的。但是对于 chrome 和 IE，它是蓝色的。

【参考方案1】：

您是否尝试过刷新浏览器缓存？我无法重现该问题，因为我在 Mac OSX 10.9.5 上的 Firefox 38 中得到了这个：

【讨论】：

是的，同样的问题。你用什么浏览器？

这是一个浏览器的东西。使用 Chrome 会产生这个问题。不过不确定非黑客解决方案。

你知道是否有可用的黑客攻击吗？

【参考方案2】：

更改.table的背景颜色

.table 
  display:table;
  background-color:grey;