table de HTML avec le défilement horizontal (première colonne fixe)

Question

Je suis en train de penser à une façon de faire une table avec une première colonne fixe (et le reste de la table avec un débordement horizontal), j'ai vu un poste qui avait une question similaire. mais le bit de colonne fixe ne semble pas être résolu. Aide?

Answer 1

J'ai une table similaire style comme ceci:

<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 diriez-vous:

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>

Vous pouvez le tester dans ce jsbin: http://jsbin.com/uxecel/4/edit

Answer 3

Utilisez plug-in jQuery DataTables, il supporte en-tête fixe et colonnes. Cet exemple ajoute support de colonne fixé à la table html « exemple »:

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

Pour deux colonnes fixes:

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

Answer 4

Sur la base de l'approche de Skube, j'ai trouvé l'ensemble minimal de CSS je avais besoin était:

.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;
}

HTML:

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

Answer 5

Jetez un oeil à ce plugin JQuery:

http://fixedheadertable.com

Il ajoute vertical (ligne d'en-tête fixe) ou horizontal (première colonne fixe) défilant à une table HTML existant. Il y a une démo, vous pouvez vérifier dans les deux cas de défilement.