title: How do I freeze the first and last columns of an html table in a scrollable div?
body: <p>I have a table which has a header row, but also a header column and a total column with several columns in between.</p>
  
  <p>Something like this:</p>
  
  <pre><code>Name    Score 1    Score 2  ...  Total
  --------------------------------------
  John       5          6            86
  Will       3          7            82
  Nick       7          1            74
  </code></pre>
  
  <p>The entire table is defined inside a fixed-width scrollable div because there are likely to be a large number of "Score" rows and I have a fixed-width page layout.</p>
  
  <pre><code>&lt;div id="tableWrapper" style="overflow-x: auto; width: 500px;"&gt;
      &lt;table id="scoreTable"&gt;
          ...
      &lt;/table&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>What I would like is for the first (<code>Name</code>) and last (<code>Total</code>) columns to remain visible while the inner columns scroll.</p>
  
  <p>Can anyone help me with this?</p>
  
  <p><strong>Edit:</strong> I mean horizontal scrolling only - changed to specify that.</p>
  
  <hr>
  
  <p><strong>Update:</strong> I've solved this problem for myself and have posted the answer below.  Let me know if you need any more information - this was a bit of a pain to do and I'd hate for someone else to have to rewrite everything.</p>