title: Tables: How to achieve “normal” td widths, but 100% table width?
body: <p>On our site we have tables containing data. We like the column widths we get with a normal <code>table</code>, but we like the border-bottom of <code>td</code>s to stretch the entire width of the page like we get with CSS: <code>table { width:100% }</code>, as can be seen on a <a href="http://jsfiddle.net/G5mJ3/" rel="nofollow noreferrer">demo table widths page</a>, which renders like this:</p>
  
  <p><img src="https://i.stack.imgur.com/67lmq.png" alt="redered image"></p>
  
  <p>Is it possible to achieve the same column widths as with a normal (non-width-100%) table in a table where the border-bottom stretches the entire width?</p>
  
  <p>And no, <code>td { white-space: nowrap }</code> in combination with an extra <code>width: 100%</code> <code>td</code> (see the link above) is not good, as sometimes the <code>td</code>s are long and so we want the <code>td</code>s to wrap exactly like in a normal table.</p>
  
  <p>We need a solution that works in at least IE6-8 + FF.</p>
  
  <p>Btw, is there <em>a better way</em> (tm) of showing HTML snippets than linking to an external page? I can show just source, but having HTML rendered too is very illustrative.</p>
  
  <p>This was originally posted on <a href="https://webmasters.stackexchange.com/questions/6653/">Webmasters</a>, but following a suggestion there, I now (re)post it here.</p>