<p>How can I create a table that has its first row and first column both locked, as in Excel, when you activate 'freeze panes'?  I need the table to both scroll horizontally and vertically (a lot of solutions for this exist, but only allow vertical scrolling).</p>

<p>So, when you scroll down in the table, the first row will stay put, since it will have the column headings.  This may end up being in a <code>thead</code>, or it may not, whatever makes the solution easier.</p>

<p>When you scroll right, the first column stays put, since it holds the labels for the rows.</p>

<p>I'm pretty certain this is impossible with CSS alone, but can anyone point me toward a JavaScript solution?  It needs to work in all major browsers.</p>

How about a solution where you put the actual "data" of the table inside its own div, with
```
overflow: scroll;
```
? Then the browser will automatically create scrollbars for the portion of the "table" you do not want to lock, and you can put the "table header"/first row just above that
```
<div>
```
.
Not sure how that would work with scrolling horizontally though.