Scroll table-content horizontally but keep the row-headers in place

I'd like to create a table with row-headers. This table will most likely have too many columns to fit the screen (especially on mobile devices). As is has even more rows I can't swap rows and columns.

I guess the perfect solution for this would be row-headers that stay in place while scrolling the other cells horizontally.

I have no idea how to accomplish this. Simply setting the row-headers (td:first-child) to position:fixed doesn't work because scrolling vertically brings the row-headers and their rows out of alignment.

I created a little jsFiddle to experiment with: http://jsfiddle.net/uRu7g/

<table><tbody>
    <tr><td>RowHeader a0</td><td>b0</td><td>c0</td><td>d0</td><td>e0</td><td>f0</td><td>g0</td><td>h0</td><td>i0</td><td>j0</td><td>k0</td><td>l0</td><td>m0</td><td>n0</td><td>o0</td><td>p0</td><td>q0</td><td>r0</td><td>s0</td><td>t0</td><td>u0</td><td>v0</td><td>w0</td><td>x0</td><td>y0</td><td>z0</td></tr>
    <tr><td>RowHeader a1</td><td>b1</td><td>c1</td><td>d1</td><td>e1</td><td>f1</td><td>g1</td><td>h1</td><td>i1</td><td>j1</td><td>k1</td><td>l1</td><td>m1</td><td>n1</td><td>o1</td><td>p1</td><td>q1</td><td>r1</td><td>s1</td><td>t1</td><td>u1</td><td>v1</td><td>w1</td><td>x1</td><td>y1</td><td>z1</td></tr>
    <tr><td>RowHeader a2</td><td>b2</td><td>c2</td><td>d2</td><td>e2</td><td>f2</td><td>g2</td><td>h2</td><td>i2</td><td>j2</td><td>k2</td><td>l2</td><td>m2</td><td>n2</td><td>o2</td><td>p2</td><td>q2</td><td>r2</td><td>s2</td><td>t2</td><td>u2</td><td>v2</td><td>w2</td><td>x2</td><td>y2</td><td>z2</td></tr>
    <tr><td>RowHeader a3</td><td>b3</td><td>c3</td><td>d3</td><td>e3</td><td>f3</td><td>g3</td><td>h3</td><td>i3</td><td>j3</td><td>k3</td><td>l3</td><td>m3</td><td>n3</td><td>o3</td><td>p3</td><td>q3</td><td>r3</td><td>s3</td><td>t3</td><td>u3</td><td>v3</td><td>w3</td><td>x3</td><td>y3</td><td>z3</td></tr>
    <tr><td>RowHeader a4</td><td>b4</td><td>c4</td><td>d4</td><td>e4</td><td>f4</td><td>g4</td><td>h4</td><td>i4</td><td>j4</td><td>k4</td><td>l4</td><td>m4</td><td>n4</td><td>o4</td><td>p4</td><td>q4</td><td>r4</td><td>s4</td><td>t4</td><td>u4</td><td>v4</td><td>w4</td><td>x4</td><td>y4</td><td>z4</td></tr>
    <tr><td>RowHeader a5</td><td>b5</td><td>c5</td><td>d5</td><td>e5</td><td>f5</td><td>g5</td><td>h5</td><td>i5</td><td>j5</td><td>k5</td><td>l5</td><td>m5</td><td>n5</td><td>o5</td><td>p5</td><td>q5</td><td>r5</td><td>s5</td><td>t5</td><td>u5</td><td>v5</td><td>w5</td><td>x5</td><td>y5</td><td>z5</td></tr>
    <tr><td>RowHeader a6</td><td>b6</td><td>c6</td><td>d6</td><td>e6</td><td>f6</td><td>g6</td><td>h6</td><td>i6</td><td>j6</td><td>k6</td><td>l6</td><td>m6</td><td>n6</td><td>o6</td><td>p6</td><td>q6</td><td>r6</td><td>s6</td><td>t6</td><td>u6</td><td>v6</td><td>w6</td><td>x6</td><td>y6</td><td>z6</td></tr>
    <tr><td>RowHeader a7</td><td>b7</td><td>c7</td><td>d7</td><td>e7</td><td>f7</td><td>g7</td><td>h7</td><td>i7</td><td>j7</td><td>k7</td><td>l7</td><td>m7</td><td>n7</td><td>o7</td><td>p7</td><td>q7</td><td>r7</td><td>s7</td><td>t7</td><td>u7</td><td>v7</td><td>w7</td><td>x7</td><td>y7</td><td>z7</td></tr>
    <tr><td>RowHeader a8</td><td>b8</td><td>c8</td><td>d8</td><td>e8</td><td>f8</td><td>g8</td><td>h8</td><td>i8</td><td>j8</td><td>k8</td><td>l8</td><td>m8</td><td>n8</td><td>o8</td><td>p8</td><td>q8</td><td>r8</td><td>s8</td><td>t8</td><td>u8</td><td>v8</td><td>w8</td><td>x8</td><td>y8</td><td>z8</td></tr>
    <tr><td>RowHeader a9</td><td>b9</td><td>c9</td><td>d9</td><td>e9</td><td>f9</td><td>g9</td><td>h9</td><td>i9</td><td>j9</td><td>k9</td><td>l9</td><td>m9</td><td>n9</td><td>o9</td><td>p9</td><td>q9</td><td>r9</td><td>s9</td><td>t9</td><td>u9</td><td>v9</td><td>w9</td><td>x9</td><td>y9</td><td>z9</td></tr>
</tbody></table>



body {
    font-family: sans-serif;
    text-transform: uppercase;
}
td {
    padding: 6px;
    white-space: nowrap;
}
td:first-child {
    width: 100px;
    background-color: gray;
}

You can create two tables

1- One which will hold the row header

2- The one that will contain your data and that will be scroll able.

<table id="table-header"></table>
<table id="table-items"></table>

Here is a jsfiddle

Not: I didn't remove the row header in the second table.