title: How to display vertical text in table headers with auto height / without text overflow?
body: <p>I want to display rotated text as table headers, using the CSS transform property. The header row should adjust its height as needed, but instead the rotated text just overflows: </p>
  
  <p><img src="https://i.stack.imgur.com/mWCd9.png" alt="example wrong"></p>
  
  <p><a href="http://jsfiddle.net/timbuethe/qjzwG/" rel="noreferrer">demo fiddle</a></p>
  
  <p>My question is, how to get the table header to grow as needed? Essentially it should look like this:</p>
  
  <p><img src="https://i.stack.imgur.com/SgEOP.png" alt="example right"></p>