webentwicklung-frage-antwort-db.com.de

Maximale Höhe für den Inhalt der Tabellenzelle festlegen

Ich habe einen Tisch, der immer einen bestimmten Prozentsatz der Bildschirmhöhe einnehmen sollte. Die meisten Reihen haben eine feste Höhe, aber ich habe eine Reihe, die sich ausdehnen sollte, um den verfügbaren Platz zu füllen. Für den Fall, dass der Inhalt einer Zelle in dieser Zeile die gewünschte Höhe überläuft, möchte ich, dass der Inhalt mit overflow: ausgeblendet wird.

Leider berücksichtigen Tabellen und Zeilen die Eigenschaft max-height nicht. (Dies ist in der W3C-Spezifikation). Wenn sich zu viel Text in der Zelle befindet, wird die Tabelle größer, anstatt den angegebenen Prozentsatz einzuhalten.

Ich kann die Tabellenzelle dazu bringen, sich zu verhalten, wenn ich eine feste Höhe in Pixeln für sie festlege, was jedoch den Zweck verfehlt, sie automatisch ausdehnen zu lassen, um den verfügbaren Platz zu füllen.

Ich habe es mit divs ausprobiert, kann aber die magische Formel nicht finden. Wenn ich divs mit display: table,: table-row und: table-cell verwende, verhalten sich die divs wie eine Tabelle.

Gibt es Hinweise, wie ich eine Max-Height-Eigenschaft in einer Tabelle simulieren kann?

<head>
    <style>
        table {
            width: 50%;
            height: 50%;
            border-spacing: 0;
        }
        td {
            border: 1px solid black;
        }
        .headfoot {
            height: 20px;
        }
        #content {
            overflow: hidden;
        }
    </style>
</head>
<body>
<table>
    <tr class="headfoot"><td>header</td></tr>
    <tr>
        <td>
        <div id="content">
            put lots of text here
        </div>
        </td>
        <tr>
    <tr class="headfoot"><td>footer</td></tr>
</table>
</body>
38
ccleve

Wir haben endlich eine Art Antwort gefunden. Zunächst das Problem: Die Tabelle wird immer um den Inhalt herum angepasst, anstatt den Inhalt in die Tabelle zu zwingen. Das schränkt deine Möglichkeiten ein.

Wir haben es getan, indem wir den Inhalt div so eingestellt haben, dass er angezeigt wird: none, die Tabellengröße selbst überlassen und dann in Javascript die Höhe und Breite des Inhalts div auf die innere Höhe und Breite des umschließenden td-Tags setzen. Zeige den Inhalt div. Wiederholen Sie den Vorgang, wenn die Größe des Fensters geändert wird.

15
ccleve

Legen Sie die Etiketten einfach in ein div in das TD und geben Sie die Höhe und den Überlauf ein.

<table>
<tr>
  <td><div style="height:40px; overflow:hidden">Sample</div></td>
  <td><div style="height:40px; overflow:hidden">Text</div></td>
  <td><div style="height:40px; overflow:hidden">Here</div></td>
</tr>
</table>
47
keithics

Ich hatte das gleiche Problem mit einem Tabellenlayout, das ich gerade erstellte. Ich benutzte die Lösung von Joseph Marikle, ließ es aber auch für FireFox funktionieren und fügte einen Tabellenzeilenstil hinzu. Eine reine CSS-Lösung, da die Verwendung von Javascript völlig unnötig und übertrieben erscheint.

html

<div class='wrapper'>
    <div class='table'>
        <div class='table-row'>
            <div class='table-cell'>
                content here
            </div>
            <div class='table-cell'>
                <div class='cell-wrap'>
                    lots of content here
                </div>
            </div>
            <div class='table-cell'>
                content here
            </div>
            <div class='table-cell'>
                content here
            </div>
        </div>
    </div>
</div>

css

.wrapper {height: 200px;}
.table {position: relative; overflow: hidden; display: table; width: 100%; height: 50%;}
.table-row {display: table-row; height: 100%;}
.table-cell {position: relative; overflow: hidden; display: table-cell;}
.cell-wrap {position: absolute; overflow: hidden; top: 0; left: 0; width: 100%; height: 100%;}

Sie benötigen einen Wrapper um die Tabelle, wenn die Tabelle eine prozentuale Höhe einhalten soll. Andernfalls können Sie einfach eine Pixelhöhe für das Tabellenelement festlegen.

3
cellen

Möglicherweise kein Cross-Browser, aber ich habe Folgendes erhalten: http://jsfiddle.net/QexkH/

grundsätzlich ist eine Kopf- und Fußzeile mit fester Höhe erforderlich. und es positioniert absolut den Tisch.

    table {
        width: 50%;
        height: 50%;
        border-spacing: 0;
        position:absolute;
    }
    td {
        border: 1px solid black;
    }
    #content {
        position:absolute;
        width:100%;
        left:0px;
        top:20px;
        bottom:20px;
        overflow: hidden;
    }
2
Joseph Marikle

Was ich gefunden habe !!!, In Tabellen funktioniert CSS td{height:60px;} genauso wie CSS td{min-height:60px;}

Ich kenne diese Situation, wenn die Zellengröße schlecht aussieht. Diese Javascript-Lösung muss nicht versteckt werden.

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

1
Mr. Rick

Ein anderer Weg, der vielleicht nicht passt, aber sicherlich der einfachste:

td {
    display: table-caption;
}
1
zak

Ich habe es nur mit diesem Plugin gelöst: http://dotdotdot.frebsite.nl/

es legt automatisch eine maximale Höhe für das Ziel fest und fügt drei Punkte hinzu

0
Francesco Borzi