title: How to prevent CSS table row expanding to parent height
body: <p>I'm trying to make a table with CSS <code>display:table</code> <code>display:table-row</code> and <code>display:table-cell</code>. The problem is I can't set the height of table rows. They are expanded to parent height. In my code I set <code>.trow</code> height to <code>30px</code> but they are expanded to parent height <code>400px</code>.<code>!important</code> and inline style are not work too. How can I solve this?</p>
  
  <p>P.S So sorry for my poor English.</p>
  
  <pre><code>&lt;!DOCTYPE html&gt;
  &lt;html&gt;
  &lt;head&gt;
      &lt;title&gt;&lt;/title&gt;
      &lt;style type="text/css"&gt;
          .table{
              display: table;
              width: 500px;
              border: 1px solid #000000;
              height: 400px;
          }
          .trow{
              height: 30px;
              display: table-row;
              width: 100%;
              background-color: #444444;
          }
          .tcell{
              display: table-cell;
              width: 20%;
              color: #ffffff;
          }
      &lt;/style&gt;
  &lt;/head&gt;
  &lt;body&gt;
  &lt;div class="table"&gt;
      &lt;div class="trow" style="height: 30px"&gt;
          &lt;div class="tcell"&gt;I'm table cell&lt;/div&gt;
      &lt;/div&gt;
  &lt;/div&gt;
  &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>