title: Why doesn't a table-cell styled element without explicit width stretch to fill the remaining width of a table/table-row styled parent?
body: <p>Can someone explain why the two table layouts below aren't the same (specifically, why the second 'table-cell' div doesn't stretch to take up the rest of the width of the 'table' parent div, as it does in the real table)?</p>
  
  <pre><code>&lt;html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en"&gt;
      &lt;head&gt;&lt;/head&gt;
      &lt;body&gt;
          &lt;div style="width: 100%; border: 1px solid black;"&gt;
              &lt;div style="display: table-cell; border: 1px solid red; height: 20px; width: 20px;"&gt;.&lt;/div&gt;
              &lt;div style="display: table-cell; border: 1px solid red;"&gt;.&lt;/div&gt;
              &lt;div style="display: table-cell; border: 1px solid red; height: 20px; width: 20px;"&gt;.&lt;/div&gt;
          &lt;/div&gt;
          &lt;table style="width: 100%; border: 1px solid black; border-spacing: 0;"&gt;
              &lt;tr&gt;
                  &lt;td style="width: 20px; border: 1px solid red;"&gt;.&lt;/td&gt;
                  &lt;td style="border: 1px solid red;"&gt;.&lt;/td&gt;
                  &lt;td style="width: 20px; border: 1px solid red;"&gt;.&lt;/td&gt;
              &lt;/tr&gt;
          &lt;/table&gt;
      &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>
  
  <p>Edit: turns out you get some unexpected behaviour if you try and style an image as a table-cell:</p>
  
  <pre><code>&lt;html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en"&gt;
    &lt;head&gt;
        &lt;style type="text/css"&gt;&lt;![CDATA[
  * {border: 1px solid black;}
  table, .table, .row {
      width: 100%;
  }
  .table {
      display: table;
  }
  .row {
      display: table-row;
  }
  .cell {
      display: table-cell;
  }
  img {
      height: 21px;
      width: 21px;
  }
      ]]&gt;&lt;/style&gt;
    &lt;/head&gt;
    &lt;body&gt;
      &lt;div class="table"&gt;
        &lt;div class="row"&gt;
          &lt;img src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAUA
  AAAFCAYAAACNbyblAAAAHElEQVQI12P4//8/w38GIAXDIBKE0DHxgljNBAAO
  9TXL0Y4OHwAAAABJRU5ErkJggg==" class="cell" /&gt;
          &lt;div class="cell"&gt;
          &lt;/div&gt;
          &lt;img src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAUA
  AAAFCAYAAACNbyblAAAAHElEQVQI12P4//8/w38GIAXDIBKE0DHxgljNBAAO
  9TXL0Y4OHwAAAABJRU5ErkJggg==" class="cell" /&gt;
        &lt;/div&gt;
      &lt;/div&gt;
    &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>
  
  <p>The 2nd cell-styled div doesn't stretch all the way horizontally to fill the rest of the table width. If you add content to it, it gradually does though. Weird.</p>