title: CSS: How to have a scrollable table with a dynamic width cell
body: <p>[The solution to my problem only needs to work in Chrome; this is for use in an internal environment where we have control of the browser being used.]</p>
  
  <h2>Problem:</h2>
  
  <p>I have a table where all but one of the cells is a fixed width, except for the last cell which simply takes up the rest of the space. My issue is that I need this table to be a fixed height and the body isn't scrolling as demonstrated here: <a href="http://jsfiddle.net/2zE5j/11/" rel="nofollow noreferrer">http://jsfiddle.net/2zE5j/11/</a></p>
  
  <pre><code>table tbody {
      /*display:block;*/
      height:200px;
      overflow:hidden;
      overflow-y:auto;
  }
  </code></pre>
  
  <p><img src="https://i.stack.imgur.com/YI9Su.png" alt="Table cells with proper widths, but can&#39;t scroll"></p>
  
  <p>According to <a href="https://stackoverflow.com/questions/4457274/css-how-to-specify-tables-height-such-that-a-vertical-scroll-bar-appears">this</a> answer you can use display:block; to make the table scrollable within the fixed height. However, while it does now scroll, when I do that it completely messes up the cell widths as seen here: <a href="http://jsfiddle.net/2zE5j/12/" rel="nofollow noreferrer">http://jsfiddle.net/2zE5j/12/</a></p>
  
  <pre><code>table tbody {
      display:block;
      height:200px;
      overflow:hidden;
      overflow-y:auto;
  }
  </code></pre>
  
  <p><img src="https://i.stack.imgur.com/4Xg7l.png" alt="Table that can scroll, but cell widths are messed up"></p>
  
  <p>There is only a single line difference between the two jsfiddles.</p>
  
  <h2>Question:</h2>
  
  <p>So, how can I have a table where both the last cell has a dynamic width and the body is scrollable?</p>