web-dev-qa-db-fra.com

Tableau HTML avec défilement horizontal (première colonne fixée)

J'ai essayé de trouver un moyen de créer un tableau avec une première colonne fixe (et le reste du tableau avec un débordement horizontal). J'ai vu un message qui comportait une question similaire. mais le bit de colonne fixe ne semblait pas être résolu. Aidez-moi?

htmloverflowhtml-tablefixed
57
Alan

J'ai un tableau similaire de la manière suivante:

<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>
23
kbrimington

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

97
skube

Utilisez le plug-in jQuery DataTables, il prend en charge les en-têtes et les colonnes fixes. Cet exemple ajoute un support de colonne fixe à 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

9
mas_oz2k1

Sur la base de l'approche de skube, j'ai découvert que l'ensemble minimal de CSS dont j'avais besoin était le suivant:

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

avec HTML:

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

Jetez un coup d'oeil à ce plugin JQuery:

http://fixedheadertable.com

Il ajoute vertical (rangée d'en-tête fixe) ou horizontal (première colonne fixe) le défilement vers un tableau HTML existant. Il y a une démo que vous pouvez vérifier pour les deux cas de défilement.

4
Markos Fragkakis