title: Using css with an html table, is it possible to have the first column float above the remaining columns for all rows?
body: <p>I have tons of tables in a site, and the first column for most of the datasets sometimes contains large strings (e.g. Product Names) while the remaining columns contain small numbers.  With truncation not being an option, is there an easy and clean way with css to have the first column in a table 'float' above the other columns as if it were performing a <code>colspan</code>?</p>
  
  <p><strong>Here's how I would like to script the table (or how it's already scripted):</strong></p>
  
  <pre><code>&lt;table class="table-foldingfirstcolumn"&gt;
    &lt;thead&gt;
      &lt;tr&gt;
        &lt;th&gt;First Column&lt;/th&gt;
        &lt;th&gt;Second Column&lt;/th&gt;
        &lt;th&gt;Third Column&lt;/th&gt;
      &lt;/tr&gt;
    &lt;/thead&gt;
    &lt;tbody&gt;
      &lt;tr&gt;
        &lt;td&gt;Very long first column that should float on top of other columns&lt;/td&gt;
        &lt;td&gt;1&lt;/td&gt;
        &lt;td&gt;2&lt;/td&gt;
      &lt;/tr&gt;
    &lt;/tbody&gt;
  &lt;/table&gt;
  </code></pre>
  
  <p><strong>Here's how it outputs (which is not the desired output):</strong></p>
  
  <pre>
  ======================================================
  First Column   |   Second Column    |    Third Column   
  ======================================================
  Very long first           1                    2
  column that
  should float on
  top of other
  columns
  </pre>
  
  <p><strong>Here's the desired output:</strong></p>
  
  <pre>
  ======================================================
  First Column    
  Second Column    |    Third Column   
  ======================================================
  Very long first column that should float on top of other columns   
        1                    2
  
  </pre>
  
  <p>Thanks for any guidance!</p>