title: css display:table not displaying the border
body: <pre><code>&lt;html&gt;
      &lt;style type=&quot;text/css&quot;&gt;
          .table   { display: table;}
          .tablerow  { display: table-row; border:1px solid black;}
          .tablecell { display: table-cell; }
      &lt;/style&gt;
      &lt;div class=&quot;table&quot;&gt;
          &lt;div class=&quot;tablerow&quot;&gt;
              &lt;div class=&quot;tablecell&quot;&gt;Hello&lt;/div&gt;
              &lt;div class=&quot;tablecell&quot;&gt;world&lt;/div&gt;
          &lt;/div&gt;
          &lt;div class=&quot;tablerow&quot;&gt;
              &lt;div class=&quot;tablecell&quot;&gt;foo&lt;/div&gt;
              &lt;div class=&quot;tablecell&quot;&gt;bar&lt;/div&gt;
          &lt;/div&gt;
      &lt;/div&gt;
  &lt;/html&gt;
  </code></pre>
  <p>According to my understanding, a black border should be drawn on each of the rows which I've specified via tablerow class. But the border doesn't come up.</p>
  <p>And I wanted to change the height of a row. If I specify it with 'px' -- it works. But, if I give it with a % -- won't work.I tried the following</p>
  <pre><code>.tablerow  { 
      display: table-row;
      border:1px solid black;
      position: relative; //not affecting anything and the border disappears!! 
      //position: absolute; // if this is set,the rows overlaps and the border works
      height: 40%; // works only if specified in px and not in %
  }
  </code></pre>
  <p>Something is going wrong somewhere, but I am not able to understand where. Please help!</p>