Kann ich eine Mindesthöhe für Tisch, Tr oder Td verwenden?

Lesezeit: 3 Minuten

Benutzer-Avatar
kilkadg

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

Ich möchte, dass diese Tabelle eine Mindesthöhe hat, um die Produkte anzuzeigen. Wenn es also nur ein Produkt gibt, hätte die Tabelle am Ende zumindest etwas Leerraum. Wenn es andererseits 5 oder mehr Produkte gibt, hat es diesen leeren Platz nicht.

Ich habe dieses CSS ausprobiert:

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

Aber es funktioniert nicht.

Benutzer-Avatar
Aureliano Far Suau

height zum td funktioniert wie min-height:

td {
  height: 100px;
}

Anstatt von

td {
  min-height: 100px;
}

Tabellenzellen wachsen, wenn der Inhalt nicht passt.

https://jsfiddle.net/qz70zps4/

  • In meinem Google Chrome (Version 47.0.2526.106 m) unter Windows 7 fand ich diese Einstellung height von a td wird eigentlich als verarbeitet padding oben und unten, was zu Layoutproblemen führen kann, da Sie denken, dass es sich wirklich um ein handelt height Platz. Es wird in den Entwicklungstools 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

    30. Dezember 2015 um 19:24 Uhr


  • aber die frage war auf min-höhe, das geht nicht! Was passiert, wenn Sie einen langen Text haben und eine weitere Zeile mit Höhe benötigen, wird er durcheinander gebracht

    – CMS

    13. April 2016 um 20:09 Uhr

  • wie @CMS sagte, fragte er nach min-height nicht height Wie @frank unten erklärt, verhält es sich jedoch genauso für table td. Also muss das vielleicht etwas besser erklärt werden.

    – dft

    5. Dezember 2016 um 19:19 Uhr


  • Dies ist definitiv eine bessere Antwort als die akzeptierte.

    – Jinjubei

    28. Dezember 2016 um 21:58 Uhr

  • Diese Antwort hat mir gerade möglicherweise Stunden Arbeit erspart, sollte die Antwort sein.

    – Lukas Spring

    4. August 2017 um 18:59 Uhr

Es ist keine schöne Lösung, aber versuche 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-height:

div {
    min-height: 300px;
}

Hoffe das ist was du willst…

  • @SackySan Sie müssen den Divs-Klassen geben und diese Regel dann nur für diese Klasse gelten lassen

    – Zachary Weixelbaum

    26. April 2017 um 12:44 Uhr

  • Es ist überhaupt nicht schön!

    – Achmad

    9. August 2020 um 10:16 Uhr

Benutzer-Avatar
Alex Omelnitckii

Die Lösung ohne div wird ein Pseudoelement wie verwendet ::after in den ersten td in Reihe mit min-height. Speichern Sie Ihr HTML sauber.

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

Benutzer-Avatar
Sobin Augustinus

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 packen, und geben Sie dem div ein min-height
jsFiddle hier

<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">
                    Good Morning !
                </div>
            </td>
        </tr>
    </tbody>
</table>

wenn Sie style=”height:100px;” Auf einem TD Wenn der TD Inhalt hat, der die Zelle mehr als das vergrößert, ist die Mindesthöhe auf einem TD nicht erforderlich.

Benutzer-Avatar
Agu Dondo

Tabellen und Tabellenzellen verwenden die nicht min-height Eigentum, Einstellung ihrer height wird die Mindesthöhe sein, da Tabellen erweitert werden, wenn der Inhalt sie dehnt.

Benutzer-Avatar
Sacky San

Verwenden Sie einfach den CSS-Eintrag von min-height zu einer der Zellen Ihrer Tabellenzeile. Funktioniert auch auf 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>

1333890cookie-checkKann ich eine Mindesthöhe für Tisch, Tr oder Td verwenden?

This website is using cookies to improve the user-friendliness. You agree by using the website further.

Privacy policy