title: Creating a html table with dynamically expanding number of columns to fit screen size
body: <p>I have long list of data (for an example say States and their Abbreviations) I want to display in HTML table.  Instead of displaying the data in 2 x 50 table I would like it more compact for larger screens (so the user does not have scroll up and down as much but still won't have to scroll horizontally)</p>
  
  <p>So this would grow dynamically:</p>
  
  <pre>
  State       | Ab
  -------------------
  Alabama     | AL
  Alaska      | AK
  Arizona     | AZ
  Arkansas    | AR
  California  | CA
  Colorado    | CO
  Connecticut | CT
  </pre>
  
  <p>to: </p>
  
  <pre>
  State       | Ab | State       | Ab |
  --------------------------------------
  Alabama     | AL | California  | CA |
  Alaska      | AK | Colorado    | CO |
  Arizona     | AZ | Connecticut | CT |
  Arkansas    | AR |
  </pre>
  
  <p>or this:</p>
  
  <pre>
  State       | Ab | State      | Ab | State       | Ab |
  ---------------------------------------------------------
  Alabama     | AL | Arkansas   | AR | Colorado    | CO |
  Alaska      | AK | California | CA | Connecticut | CT |
  Arizona     | AZ |
  </pre>
  
  <p>etc.... </p>
  
  <p>Depending on the screen width.</p>
  
  <p>I am doing this in Rail 3 app with jQuery so I prefer jQuery solution but open to any ideas.</p>