How to fix column in table accessible?

Question

I have a table with several columns and I need the first column to be fixed on the table. However, all the "ready" solutions I found create two tables, which is inaccessible.

I need the result exactly like this plugin http://www.michaelkeck.de/projects/jquery/tinytbl/ does. However, without creating a new HTML structure, let alone divide the content into two tables, which makes everything inaccessible.

I have also tried using position:Bsolute in the first column, but then the height of the lines is not equal.

Has anyone ever had that need or needed anything like it?

Table is a normal table:

<table>
    <thead>
        <tr>
            <th>Aluno</th>
            <th>Aula 1</th>
            <th>Aula 2</th>
            <th>Aula 3</th>
            <th>Aula 4</th>
            <th>Aula 5</th>
            <th>Aula 6</th>
            <th>...</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>Fábio Rocha</td>
            <td>-</td>
            <td>-</td>
            <td>-</td>
            <td>-</td>
            <td>-</td>
            <td>-</td>
            <td>-</td>
        </tr>
    </tbody>
</table>

Answer 1

Here is a suggestion:

var posicoes = $('tr > th:first-of-type, tr > td:first-of-type').map(function () {
    return $(this).position()
});
var largura = $('tr > td:first').outerWidth();
$('table').css('margin-left', largura);
$('tr > th:first-of-type, tr > td:first-of-type').each(function (i) {
    this.style.position = 'fixed';
    this.style.left = posicoes[i].left;
    this.style.top = posicoes[i].top;
});

Example

Answer 2

Would this be?

HTML:

<table width=200 height=200 frameborder=1>
<tr class="fixed">
    <td>a</td>
    <td>b</td>
</tr>
<tr class="fixed">
    <td>c</td>
    <td>d</td>
</tr>    
</table>

CSS:

.fixed td {
  width: 50px;
  height: 20px;
  display: block;
  background-color: green;
  border: 1px solid blue;
}

Here is an Example in Jsfiddle