title: Resize an HTML Table Forcing All Columns to Stay in View
body: <p>I'm looking for a simple solution to having a table be able to shrink horizontally while keeping all of the columns in view. As the columns shrink the content inside of them should become horizontally scrollable.</p>
  
  <p>Example problem:</p>
  
  <p><a href="http://codepen.io/kirkouimet/pen/jybbxK" rel="nofollow noreferrer">http://codepen.io/kirkouimet/pen/jybbxK</a></p>
  
  <p>Assumptions and goals:</p>
  
  <ul>
  <li>We will not know how many columns there will be</li>
  <li>The columns will always stay on one line (CSS white-space: nowrap)</li>
  <li>Ideally the solution does not involve JavaScript, just CSS</li>
  <li>It would be awesome if the text inside of the table ellipsed (...) and then when you hovered over it, it expanded and you could scroll it horizontally</li>
  </ul>
  
  <p>Code from the Codepen link:</p>
  
  <p><strong>HTML</strong></p>
  
  <pre><code>&lt;table&gt;
      &lt;thead&gt;
          &lt;th&gt;First First First&lt;/th&gt;
          &lt;th&gt;Second Second Second&lt;/th&gt;
          &lt;th&gt;Third Third Third&lt;/th&gt;
          &lt;th&gt;Fourth Fourth Fourth&lt;/th&gt;
      &lt;/thead&gt;
      &lt;tr&gt;
          &lt;td&gt;First First First&lt;/td&gt;
          &lt;td&gt;Second Second Second&lt;/td&gt;
          &lt;td&gt;Third Third Third&lt;/td&gt;
          &lt;td&gt;Fourth Fourth Fourth&lt;/td&gt;
      &lt;/tr&gt;
      &lt;tr&gt;
          &lt;td&gt;First First First&lt;/td&gt;
          &lt;td&gt;Second Second Second&lt;/td&gt;
          &lt;td&gt;Third Third Third&lt;/td&gt;
          &lt;td&gt;Fourth Fourth Fourth&lt;/td&gt;
      &lt;/tr&gt;
      &lt;tr&gt;
          &lt;td&gt;First First First&lt;/td&gt;
          &lt;td&gt;Second Second Second&lt;/td&gt;
          &lt;td&gt;Third Third Third&lt;/td&gt;
          &lt;td&gt;Fourth Fourth Fourth&lt;/td&gt;
      &lt;/tr&gt;
  &lt;/table&gt;
  </code></pre>
  
  <p><strong>CSS</strong></p>
  
  <pre><code>table {
      border-collapse: collapse;
      width: 100%;
  }
  
  th, td {
      border: 1px solid #ccc;
      white-space: nowrap;
  }
  </code></pre>