Kann ich eine Mindesthöhe für table, tr oder td verwenden?

120

Ich versuche, einige Details eines Empfangs in einer Tabelle anzuzeigen.

Ich möchte, dass dieser Tisch eine Mindesthöhe hat, um die Produkte zu zeigen. Wenn es also nur ein Produkt gibt, hat die Tabelle am Ende mindestens einen Leerraum. Wenn es dagegen 5 oder mehr Produkte gibt, ist dies nicht der leere Raum.

Ich habe versucht mit diesem CSS:

table,td,tr{
  min-height:300px;
}

Aber es funktioniert nicht.

Danke im Voraus.

html css Kilkadg
quelle
1
Es wäre hilfreich, wenn Sie eine Geige erstellen, damit wir Ihren Code ausprobieren können.
Mavrosxristoforos

Antworten:

39

Es ist keine schöne Lösung, aber versuchen Sie es so:

<table>
    <tr>
        <td>
            <div>Lorem</div>
        </td>
    </tr>
    <tr>
        <td>
            <div>Ipsum</div>
        </td>
    </tr>
</table>

und setze die divs auf die min-höhe:

div {
    min-height: 300px;
}

Hoffe das ist was du willst ...

Arnold Zak
quelle
2
@ SackySan müssen Sie die divs Klassen geben und dann diese Regel nur für diese Klasse anwenden lassen
Zachary Weixelbaum
408

heightfür tdArbeiten wie min-height:

td {
  height: 100px;
}

anstatt 

td {
  min-height: 100px;
}

Tabellenzellen wachsen, wenn der Inhalt nicht passt.

https://jsfiddle.net/qz70zps4/

Aureliano Far Suau
quelle
2
In meinem Google Chrome (Version 47.0.2526.106 m), das unter Windows 7 ausgeführt wird, wurde festgestellt, dass das Festlegen heightdes "a" tdtatsächlich als " paddingoben" und "unten" verarbeitet wird, was zu Layoutproblemen führen kann, da Sie der Meinung sind, dass es sich wirklich um ein heightLeerzeichen handelt. Es wird in den Entwicklungswerkzeugen nicht als Stil oder als berechneter Stil angezeigt, aber wenn Sie mit der Maus über das inspizierte HTML-Element fahren, wird es auf dem Bildschirm angezeigt.
Felypp Oliveira
aber die frage war auf min-höhe die nicht funktioniert! Was passiert, wenn Sie einen langen Text haben und eine andere Zeile mit Höhe benötigen, wird es durcheinander gebracht
CMS
Wie @CMS sagte, fragte er min-heightnicht danach, heightwie @frank unten erklärt, verhält es sich genauso für table td. Vielleicht braucht dies eine etwas bessere Erklärung.
dft
3
Dies ist definitiv eine bessere Antwort als die akzeptierte.
Jinjubei
2
Diese Antwort hat mir gerade potenziell Arbeitsstunden erspart, sollte die Antwort sein.
Luke Pring
28

Die Lösung ohne divwird ein Pseudoelement wie ::afterin first tdin row with verwendet min-height. Speichern Sie Ihren HTML-Code sauber.

table tr td:first-child::after {
   content: "";
   display: inline-block;
   vertical-align: top;
   min-height: 60px;
}
Alex Omelnitckii
quelle
13

In CSS 2.1 ist die Auswirkung von 'min-height' und 'max-height' auf Tabellen, Inline-Tabellen, Tabellenzellen, Tabellenzeilen und Zeilengruppen undefiniert.

Versuchen Sie also, den Inhalt in ein Div zu verpacken, und geben Sie dem Div hier eine min-height jsFiddle

<table cellspacing="0" cellpadding="0" border="0" style="width:300px">
    <tbody>
        <tr>
            <td>
                <div style="min-height: 100px; background-color: #ccc">
                Hello World !
                </div>
            </td>
            <td>
                <div style="min-height: 100px; background-color: #f00">
                Goog MOrning !
                </div>
            </td>
        </tr>
    </tbody>
</table>
Sobin Augustine
quelle
5

Wenn Sie style = "height: 100px;" auf einem td Wenn der td Inhalt hat, der die Zelle mehr als das vergrößert, ist auf einem td keine minimale Höhe erforderlich.

frank
quelle
0

Tabellen und Tabellenzellen verwenden das nicht min-height Eigenschaft Mindesthöhe fest, heightda Tabellen erweitert werden, wenn der Inhalt sie streckt.

Agu Dondo
quelle
-1

Verwenden Sie einfach den CSS-Eintrag von min-height in einer der Zellen Ihrer Tabellenzeile. Funktioniert auch mit alten Browsern.

.rowNumberColumn {
    background-color: #e6e6e6;
    min-height: 22;
}

<table width="100%" cellspacing="0" class="htmlgrid-table">
    <tr id="tr_0">
            <td width="3%" align="center" class="readOnlyCell rowNumberColumn">1</td>
            <td align="left" width="40%" id="td_0_0" class="readOnlyCell gContentSection">411978430-Intimate:Ruby:Small</td>
Sacky San
quelle