Tengo una tabla que tiene un gran número de líneas y columnas. Pero me gustaría tener el encabezado fijo y la primera columna fija. Aquí hay una foto de lo que necesito.

Solo la parte rosada debe desplazarse horizontal y verticalmente, pero las otras deben permanecer visibles durante el desplazamiento. Mi mesa esta en un div. Primero, ¿debo usar una mesa o cuatro (la azul, la roja, la verde y la rosa)?

He escrito este violín:

http://jsfiddle.net/5XWqj/1/

Intenté arreglar el encabezado primero pero no fui un éxito

#container thead {
    position: fixed;
    top: 0;
}

Y algo así para seleccionar y arreglar la primera columna.

#container tbody tr td:first-child {
    position: fixed;
    left: 0;
}

Pero no se trata de arreglar el div que envuelve mi mesa. ¿Tal vez necesito jQuery o JavaScript?

Si alguien pudiera ayudar.