Tabela HTML com rolagem horizontal (primeira coluna fixa)

Question

Eu tenho tentado pensar em uma maneira de fazer uma mesa com uma primeira coluna fixa (e o restante da tabela com um transbordamento horizontal). Vi um post que tinha uma pergunta semelhante. Mas o bit de coluna fixa não parecia ser resolvido. Ajuda?

Answer 1

Eu tenho uma tabela semelhante como assim:

<table style="width:100%; table-layout:fixed">
    <tr>
        <td style="width: 150px">Hello, World!</td>
        <td>
            <div>
                <pre style="margin:0; overflow:scroll">My preformatted content</pre>
            </div>
        </td>
    </tr>
</table>

Answer 2

Que tal:

table {
  table-layout: fixed; 
  width: 100%;
  *margin-left: -100px; /*ie7*/
}
td, th {
  vertical-align: top;
  border-top: 1px solid #ccc;
  padding: 10px;
  width: 100px;
}
.fix {
  position: absolute;
  *position: relative; /*ie7*/
  margin-left: -100px;
  width: 100px;
}
.outer {
  position: relative;
}
.inner {
  overflow-x: scroll;
  overflow-y: visible;
  width: 400px; 
  margin-left: 100px;
}

<div class="outer">
  <div class="inner">
    <table>
      <tr>
        <th class=fix></th>
        <th>Col 1</th>
        <th>Col 2</th>
        <th>Col 3</th>
        <th>Col 4</th>
        <th class="fix">Col 5</th>
      </tr>
      <tr>
        <th class=fix>Header A</th>
        <td>col 1 - A</td>
        <td>col 2 - A (WITH LONGER CONTENT)</td>
        <td>col 3 - A</td>
        <td>col 4 - A</td>
        <td class=fix>col 5 - A</td>
      </tr>
      <tr>
        <th class=fix>Header B</th>
        <td>col 1 - B</td>
        <td>col 2 - B</td>
        <td>col 3 - B</td>
        <td>col 4 - B</td>
        <td class=fix>col 5 - B</td>
      </tr>
      <tr>
        <th class=fix>Header C</th>
        <td>col 1 - C</td>
        <td>col 2 - C</td>
        <td>col 3 - C</td>
        <td>col 4 - C</td>
        <td class=fix>col 5 - C</td>
      </tr>
    </table>
  </div>
</div>

Você pode testá -lo neste JSBIN: http://jsbin.com/uxecel/4/edit

Answer 3

Use o plug-in JQuery Datatables, ele suporta cabeçalho e colunas fixos. Este exemplo adiciona suporte fixo na coluna à tabela HTML "Exemplo":

http://datatables.net/extensions/fixedcolumns/

Para duas colunas fixas:

http://www.datatables.net/release-datatables/extensions/fixedcolumns/examples/two_columns.html

Answer 4

Com base na abordagem do Skube, descobri que o conjunto mínimo de CSS que eu precisava era:

.horizontal-scroll-except-first-column {
    width: 100%;
    overflow: auto;
    margin-left: 20em;
}

.horizontal-scroll-except-first-column > table > * > tr > th:first-child,
.horizontal-scroll-except-first-column > table > * > tr > td:first-child {
    position: absolute;
    width: 20em;
    margin-left: -20em;
}

.horizontal-scroll-except-first-column > table > * > tr > th,
.horizontal-scroll-except-first-column > table > * > tr > td {
    /* Without this, if a cell wraps onto two lines, the first column
     * will look bad, and may need padding. */
    white-space: nowrap;
}

com html:

<div class="horizontal-scroll-except-first-column">
    <table>
        ...
    </table>
</div>

Answer 5

Dê uma olhada neste plugin jQuery:

http://fixedheadertable.com

Adiciona vertical (linha de cabeçalho fixo) ou horizontal (FIR PRIMEIRA COLUNA FIZ) ROLANDO para uma tabela HTML existente. Há uma demonstração que você pode verificar se há ambos os casos de rolagem.