How to fix table column in an accessible way?

Navigation
2

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

I need the result exactly as this plugin link does. However, without creating a new HTML structure, let alone dividing the content into two tables, which makes everything inaccessible.

I've also tried using position: absolute in the first column, but then the height of the lines does not look the same.

Has anyone ever had this need or need anything like this?

The 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>
    
asked by anonymous 06.02.2014 / 16:39

2 answers

1

Here's 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

    
06.02.2014 / 16:55
0

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 on JSFiddle

    
06.02.2014 / 16:56
NoMethodError in Users # show Check execution time with timeit