CSS Table-Row Backcolor vs Table Backcolor

Question

I have got a problem with CSS. I table out of div tags. The problem is: Behind .table-cell is .table-row, thats why I think, that the background-color for .table-cell is yellow, and next gray.

But when I apply border-top-left-radius to .table-cell, blue comes through the corner, and not gray. As you can see here. I am using Google Chrome 43.0 on Windows 8.1.

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

The CSS code look like this:

.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;
}

Flaccid

I expected the colors in the corners to be gray. But instead they are blue. – Flaccid

You're right, with mozilla its gray. But with chrome and IE its blue. – Flaccid

Answer 1

Have you tried refreshing your browser cache? I can't reproduce the problem since I get this in Firefox 38 on Mac OSX 10.9.5:

Granese

It's a browser thingy. Using Chrome creates this problem. Not sure about non-hacking solutions though. – Granese

Do you know if theres a hack avaiable? – Flaccid

Answer 2

change background color of .table

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

Shower