title: prevent div inside of table from expanding beyond parent's size
body: <p>I'm working on a page where I need a table which will horizontally-scroll inside of a parent div if the table becomes wider than its parent.</p>
  
  <p>Unfortunately, the platform I'm building this on places my code within a parent table cell, which breaks this. It seems that even if I put my table inside of a div (and set <code>overflow-x: scroll</code> on that div), the parent table cell inserted by the platform will expand past the size of the page to contain the children.</p>
  
  <p>I've made a fiddle of what this looks like here:
  <a href="http://jsfiddle.net/d3e9esL5/" rel="nofollow">http://jsfiddle.net/d3e9esL5/</a></p>
  
  <p>... and a fiddle of what I <em>want</em> this to look like here (sans outer table):
  <a href="http://jsfiddle.net/4budchj6/" rel="nofollow">http://jsfiddle.net/4budchj6/</a></p>
  
  <p>Clearly removing the outer table fixes this problem, but unfortunately due to the platform I'm working on I can't do that. It's also best if I can avoid applying styles to the outer table, as that markup isn't under my control.</p>
  
  <p>Is there any way I can style this the way I want without changing the outer table's markup or style?</p>