Tabella HTML con scorrimento orizzontale (prima colonna fissa)

Question

Ho cercato di pensare a un modo per fare un tavolo con una prima colonna fissa (e il resto del tavolo con un overflow orizzontale) ho visto un post che aveva una domanda simile. Ma il bit di colonna fisso non sembrava essere risolto. Aiuto?

Answer 1

Ho un tavolo simile in modo così:

<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

Che ne dite di:

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>

Puoi provarlo in questo jsbin: http://jsbin.com/uxecel/4/edit

Answer 3

Utilizzare il plug-in DataTables jQuery, supporta l'intestazione fissa e le colonne. Questo esempio aggiunge il supporto della colonna fissa alla tabella HTML "Esempio":

http://datables.net/extensions/fixedcolumns/

Per due colonne fisse:

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

Answer 4

Sulla base dell'approccio di Skube, ho trovato il set minimo di CSS di cui avevo bisogno 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;
}

con HTML:

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

Answer 5

Dai un'occhiata a questo plug -in jQuery:

http://fixedheadertable.com

Aggiunge verticale (riga di intestazione fissa) o orizzontale (Risolto la prima colonna) scorrendo su una tabella HTML esistente. C'è una demo che puoi verificare entrambi i casi di scorrimento.