title: Making table cells a block element
body: <p>I'm currently tasked with making a mobile style sheet for my works website and I've hit a wall with some of the final stages.</p>
  
  <p>My main constraint is that I can't edit the source HTML and have to work with the source provided.</p>
  
  <p>I want to make a table that contains buttons respond when it hits 450px wide by dropping the buttons (table cells) to it's own row. I can do this simply via <code>divs</code> but not <code>tables</code>. I've created a simple example of what I want to do <a href="http://test.aboutcher.co.uk/so/tables.html" rel="nofollow noreferrer">http://test.aboutcher.co.uk/so/tables.html</a> but I have no idea how this effect can be achieved in the table.</p>
  
  <p>I know tables are a bad idea for layouts but I cannot change this in the source so have to fight my way with it.</p>
  
  <p><strong>Edit</strong><br>
  I've found my issue, there's a non cell that isn't getting the <code>display:block</code> style applied in the source causing the other two that are receiving the style to ignore the display:block.</p>