title: Display:Block not working in Chrome or Safari
body: <p>I have a simple need to display the cells of a table row vertically. This works just fine in FF, but not in Chrome or Safari on the Ipad.</p>
  
  <p>The example below renders as expected in FF, with each row cell under each other, but in Chrome, it seems to ignore the display:block altogether. </p>
  
  <p>What is the issue - or is there a better way to do this.</p>
  
  <p>(The reason for wanting this is that im using @media in the CSS to render the table differently for a small screen)</p>
  
  <p>for a more visual example:</p>
  
  <p>A normal table might be</p>
  
  <pre><code>DATA1 | DATA2 | DATA3
  </code></pre>
  
  <p>but with display:block, it should be</p>
  
  <pre><code>DATA1
  DATA2
  DATA3
  </code></pre>
  
  <p>Many Thanks</p>
  
  <pre><code>&lt;html&gt;
  &lt;head&gt;
  &lt;style&gt;
      table,
      thead,
      tr,
      td
      {
          display:block;
      }
      table,tr
      {
          border : 1px dotted red;
      }
      td
      {
          border:1px dashed blue;
      }
      thead
      {
          display:none;
      }
  &lt;/style&gt;
  &lt;/head&gt;
  &lt;body&gt;
  
  &lt;table&gt;
  &lt;thead&gt;
  &lt;tr&gt;
      &lt;td&gt;Heading 1&lt;/td&gt;
      &lt;td&gt;Heading 2&lt;/td&gt;
      &lt;td&gt;Heading 3&lt;/td&gt;
  &lt;/tr&gt;
  &lt;/thead&gt;
  &lt;tbody&gt;
  &lt;tr&gt;
      &lt;td&gt;Data 1&lt;/td&gt;
      &lt;td&gt;Data 2&lt;/td&gt;
      &lt;td&gt;Data 3&lt;/td&gt;
  &lt;/tr&gt;
  &lt;tr&gt;
      &lt;td&gt;Data 1&lt;/td&gt;
      &lt;td&gt;Data 2&lt;/td&gt;
      &lt;td&gt;Data 3&lt;/td&gt;
  &lt;/tr&gt;
  &lt;tr&gt;
      &lt;td&gt;Data 1&lt;/td&gt;
      &lt;td&gt;Data 2&lt;/td&gt;
      &lt;td&gt;Data 3&lt;/td&gt;
  &lt;/tr&gt;
  
  &lt;/tbody&gt;
  &lt;/table&gt;
  
  &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>