HTML-Tabelle mit horizontalem Scrollen (erste Spalte behoben)

Ich habe versucht zu denken, ein Weg, um eine Tabelle mit einer festen ersten Spalte (und der rest der Tabelle mit einer horizontalen überlauf) sah ich einen Beitrag, der hatte eine ähnliche Frage. aber die Feste Spalte etwas schien nicht zu lösen sein. Hilfe?

Kommentar zu dem Problem
Ich möchte erweitern Sie diese Frage ein wenig: ein Freund von mir möchte eine Tabelle, die würde nicht skalieren, um mehr als 100% von der Seite, hätten aber mehr als zwei Spalten, die zusammen sein sollte Scrollbar in Fall müssen Sie horizontal mehr Platz, als es ist. In der Tat sollte ähnlich Eingefrorenen Spalten in MS Excel. Ist das möglich? Kommentarautor: Rimas Kudelis
Siehe meine Antwort auf ähnliche Frage: stackoverflow.com/a/17557830/1763149 Kommentarautor: Marcin Raczyński

InformationsquelleAutor der Frage Alan | 2010-08-04

  1. 23

    Habe ich eine ähnliche Tabelle gestylt wie so:

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

    InformationsquelleAutor der Antwort kbrimington

  2. 9

    JQuery-DataTables-plug-in unterstützt es mit festen header und Spalten.
    In diesem Beispiel wird der Feste Spalte Unterstützung für die html-Tabelle "Beispiel":

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

    Für zwei fixe Spalten:

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

    InformationsquelleAutor der Antwort mas_oz2k1

  3. 3

    Basierend auf skube Ansatz, ich fand den minimalen Satz von CSS, die ich brauchte, war:

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

    mit HTML:

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

    InformationsquelleAutor der Antwort joeytwiddle

  4. 2

    Werfen Sie einen Blick auf das JQuery-plugin:

    http://fixedheadertable.com

    Es fügt vertikale (fixed header-Zeile) oder horizontale (Feste erste Spalte) scrollen, um eine vorhandene HTML-Tabelle. Es ist eine demo, Sie können überprüfen für beide Fälle zu Blättern.

    InformationsquelleAutor der Antwort Markos Fragkakis

Schreibe einen Kommentar