title: How to make an html table deliberately exceed the width of its container?
body: <p><a href="https://jsfiddle.net/ayax2q4o/" rel="nofollow">Demo</a></p>
  
  <p>I'm trying to make a table that contains a horizontal scrollbar where the width of any individual row can be set to whatever I want. I've tried two different approaches to achieve this and they each give me problems:</p>
  
  <p>If I assign a width to my table that is larger than its containing div and apply <code>overflow-x: scroll</code>, the table exceeds the width of its container. However, I have no control over the width of my cells. Setting <code>td{width:'x'px;}</code> doesn't do anything.</p>
  
  <p>If instead I apply <code>table-layout:fixed</code> to the table, I can now adjust the width of individual rows but cannot exceed the width of the table container.</p>
  
  <p>How do I get the best of both worlds? I need the table to exceed the width of the container in order to get the scrollbar, while also being able to set the width of different rows to any value.</p>