wake-up-neo.com

Maximale Höhe für einen Tisch festlegen

Ich versuche eine Seite zu entwerfen, auf der sich Tabellen befinden. Es scheint, dass das Stylen von Tischen viel schmerzhafter ist, als es sein sollte.

Das Problem ist folgendes. Die Tabellen sollten eine feste Höhe haben und entweder - wenn zu wenig Inhalt vorhanden ist - unten eine Leerstelle anzeigen oder - wenn zu viel vorhanden ist, eine vertikale Bildlaufleiste. Hinzu kommt, dass die Tabellen einen Header haben, der nicht scrollen sollte.

Soweit ich weiß, ist das thead-Bildlauf nicht das Standardverhalten für Tabellen. Und eine Streckung tfoot könnte gut dazu dienen, sich mit Leerraum zu füllen. Leider scheint es so, als würde jede Einschränkung, die ich auf die Tischhöhe bringen kann, fröhlich ignoriert. Ich habe versucht

table {
    height: 600px;
    overflow: scroll;
}

Ich habe es mit max-height versucht. Ich habe versucht, die Tabelle absolut zu positionieren und sowohl die oberen als auch die unteren Koordinaten anzugeben. Ich habe versucht, die Höhe in Firebug manuell zu bearbeiten, um zu sehen, ob es ein Problem mit der CSS-Spezifität war. Ich habe auch versucht, die Höhe der tbody einzustellen. Fakt ist: Die Tabelle bleibt immer inhaltlich hoch , unabhängig von meinen Bemühungen.

Natürlich könnte ich eine Tabelle mit einer div-Struktur fälschen, aber es ist eigentlich ist eine Tabelle, und ich fürchte, bei der Verwendung von divs kann ich auf ein Problem stoßen, bei dem einige Spalten möglicherweise nicht richtig ausgerichtet sind.

Wie soll ich einem Tisch eine Höhe geben?

39
Andrea

NOTEdiese Antwort ist jetzt falsch . Ich kann später noch einmal darauf zurückkommen.

Wie andere darauf hingewiesen haben, können Sie die Höhe einer Tabelle nicht einstellen /, es sei denn, Sie haben die Anzeige auf block gesetzt, aber Sie erhalten dann einen Bildlauf-Header. Sie suchen also nur height und display:block auf tbody:

<table style="border: 1px solid red">
    <thead>
        <tr>
            <td>Header stays put, no scrolling</td>
        </tr>
    </thead>
    <tbody style="display: block; border: 1px solid green; height: 30px; overflow-y: scroll">
        <tr>
            <td>cell 1/1</td>
            <td>cell 1/2</td>
        </tr>
        <tr>
            <td>cell 2/1</td>
            <td>cell 2/2</td>
        </tr>
        <tr>
            <td>cell 3/1</td>
            <td>cell 3/2</td>
        </tr>
    </tbody>
</table>

Hier ist die Geige .

25
Dan Dascalescu

Fügen Sie display:block; zum CSS der Tabelle hinzu. (Mit anderen Worten ... sagen Sie der Tabelle, dass sie sich eher wie ein Blockelement verhält als eine Tabelle.)

Geige hier

8
Scott

Sie können dies tun, indem Sie die folgende CSS verwenden.

.scroll-thead{
    width: 100%;
    display: inline-table;
}

.scroll-tbody-y
{
    display: block;
    overflow-y: scroll;
}

.table-body{
    height: /*fix height here*/;
}

Nachfolgend ist der HTML-Code.

<table>
 <thead class="scroll-thead">
          <tr> 
           <th>Key</th>
           <th>Value</th>
          </tr> 
         </thead>
         <tbody class="scroll-tbody-y table-body">
          <tr> 
          <td>Blah</td> 
          <td>Blah</td> 
          </tr> 
</tbody>
</table>

JSFiddle

4
Sibi John

Ich habe mich heute von einem Kollegen fragen lassen, wie das geht, und das habe ich mir ausgedacht. Ich mag es nicht, aber es ist eine Möglichkeit, es ohne js zu machen und die Überschriften zu respektieren. Der Hauptnachteil ist jedoch, dass Sie einige Semantik verlieren, weil Sie keinen echten Tabellenkopf mehr haben.

Grundsätzlich binde ich eine Tabelle in eine Tabelle und verwende ein div als Bildlauf-Container, indem ich ihm einen max-height Gebe. Da ich die Tabelle in eine übergeordnete Tabelle einbinde, die die gefälschten Kopfzeilen "überspannt", sieht es so aus, als würde die Tabelle sie respektieren, aber in Wirklichkeit hat die untergeordnete Tabelle nur die gleiche Anzahl von Zeilen.

Ein kleines Problem, da die Bildlaufleiste Platz beansprucht und die Spaltenbreiten der untergeordneten Tabelle nicht genau übereinstimmen.

Live Demo

Markup

<table class="table-container">
    <tbody>
        <tr>
            <td>header col 1</td>
            <td>header col 2</td>
        </tr>
        <tr>
            <td colspan="2">
                <div class="scroll-container">
                    <table>
                        <tr>
                            <td>entry1</td>
                            <td>entry1</td>
                        </tr>
                       ........ all your entries
                    </table>
                </div>
            </td>
        </tr>
    </tbody>
</table>

[~ # ~] CSS [~ # ~]

.table-container {
    border:1px solid #ccc;
    border-radius: 3px;
    width:50%;
}
.table-container table {
    width: 100%;
}
.scroll-container{
    max-height: 150px;
    overflow-y: scroll;
}
3
Loktar

Verwenden Sie in Tabellen für minimale Tabellenzellenhöhe oder Zeilenhöhe css height: anstelle von min-height:.

UND

Zur Begrenzung der maximalen Höhe aller Zellen oder Zeilen in der Tabelle mit Javascript:

Dieses Skript eignet sich für horizontale Überlauftabellen.

Mit diesem Skript wird die Tabellenbreite jedes Mal um 300 Pixel erhöht (maximal 4000 Pixel), bis die Zeilen auf die maximale Höhe (160 Pixel) verkleinert werden. Sie können auch Zahlen nach Bedarf bearbeiten.

var i = 0, row, table = document.getElementsByTagName('table')[0], j = table.offsetWidth;
while (row = table.rows[i++]) {
    while (row.offsetHeight > 160 && j < 4000) {
        j += 300;
        table.style.width = j + 'px';
    }
}

Source: HTML Table Solution Maximale Höhenbegrenzung für Zeilen oder Zellen durch Erhöhen der Tabellenbreite, Javascript

0
Mr. Rick

Verwenden Sie divs mit maximaler Höhe und minimaler Höhe um den Inhalt, den Sie scrollen müssen.

<tr>
    <td>
        <div>content</div>
    </td>
</tr>

td div{
    max-height:20px;
}

https://jsfiddle.net/ethanabrace/4w0ksczr/

0
Beefjeff

Scheint sehr ähnlich zu dieser Frage. Von dort scheint es, dass dies den Trick tun sollte:

table {
  display: block; /* important */
  height: 600px;
  overflow-y: scroll;
}
0
Wesley