title: Background color not inheriting
body: <p><div class="snippet" data-lang="js" data-hide="false">
  <div class="snippet-code">
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;!DOCTYPE html&gt;
  &lt;html xmlns="http://www.w3.org/1999/xhtml"&gt;
  &lt;head&gt;
  &lt;title&gt;Test&lt;/title&gt;
  &lt;style&gt;
  .ribbon-left {left: 10px;top: 20px; width: 400px; height: 300px;position: absolute;}
  
      .css-table {display: table;margin: 0;padding: 0;background-color: red;}
      .css-row { display: table-row; }
      .css-cell {display: table-cell;vertical-align: middle; }
  
      .ribbon-left-middle {width: 80%;bottom: 0;padding-left: 5px;position: relative; }
      .ribbon-left-middle-inner {top: 5px;position: absolute;}
  
  &lt;/style&gt;
  &lt;/head&gt;
  &lt;body&gt;
  &lt;div class="ribbon-left"&gt;
      &lt;div class="css-table"&gt;
          &lt;div class="css-row"&gt;
              &lt;div class="css-cell ribbon-left-middle"&gt;
                  &lt;div class="ribbon-left-middle-inner"&gt;
                      &lt;div class="productElements"&gt;Product elements&lt;/div&gt;
                      &lt;div class="productDescription"&gt;Product description&lt;/div&gt;
                      &lt;div class="productUsage"&gt;Product usage&lt;/div&gt;
                  &lt;/div&gt;
              &lt;/div&gt;
          &lt;/div&gt;
      &lt;/div&gt;
  &lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>
  
  <pre><code>&lt;!DOCTYPE html&gt;
  &lt;html xmlns="http://www.w3.org/1999/xhtml"&gt;
  &lt;head&gt;
  &lt;title&gt;Test&lt;/title&gt;
  &lt;style&gt;
  .ribbon-left {left: 10px;top: 20px; width: 400px; height: 300px;position: absolute;}
  
      .css-table {display: table;margin: 0;padding: 0;background-color: red;}
      .css-row { display: table-row; }
      .css-cell {display: table-cell;vertical-align: middle; }
  
      .ribbon-left-middle {width: 80%;bottom: 0;padding-left: 5px;position: relative; }
      .ribbon-left-middle-inner {top: 5px;position: absolute;}
  
  &lt;/style&gt;
  &lt;/head&gt;
  &lt;body&gt;
  &lt;div class="ribbon-left"&gt;
      &lt;div class="css-table"&gt;
          &lt;div class="css-row"&gt;
              &lt;div class="css-cell ribbon-left-middle"&gt;
                  &lt;div class="ribbon-left-middle-inner"&gt;
                      &lt;div class="productElements"&gt;Product elements&lt;/div&gt;
                      &lt;div class="productDescription"&gt;Product description&lt;/div&gt;
                      &lt;div class="productUsage"&gt;Product usage&lt;/div&gt;
                  &lt;/div&gt;
              &lt;/div&gt;
          &lt;/div&gt;
      &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>
  </p>
  
  <p>This is my example. I have defined red background color to css table parent div. Why text doesn't have red background in child div's? Isn't background propagated to childs?</p>
  
  <p>The same sample only that i have more than one "css-cell" div, the red background is there.
  What should i change here?</p>