title: "Weak headings" on HTML/CSS table
body: <p>When the browser window is made smaller, I would like my HTML table to shrink as far as possible without "losing" content from the TD cells. The header cells (TH elements) can shrink as much as necessary, even if their content is no longer completely visible.</p>
  
  <p>The <strong>desired</strong> behavior is this:</p>
  
  <p><em>Narrow</em> Window, headings partly obscured, content completely visible:<br/>
  <img src="https://i.stack.imgur.com/X2nhG.gif" alt="weak headings narrow"></p>
  
  <p><em>Wide</em> Window, everything visible:<br/>
  <img src="https://i.stack.imgur.com/YTubl.gif" alt="weak headings wide"></p>
  
  <p>I tried using <code>overflow: hidden;</code> on the TH cells, but it has no effect. Here is <a href="http://jsfiddle.net/L11sez3j/2/" rel="nofollow noreferrer">the Fiddle</a>.</p>