it-swarm.com.de

Minimale Höhe auf dem Tisch erzwingen

Ich habe diesen Code:

<table cellspacing="0" cellpadding="0" border="0" style="width:415px">
    <tbody>
        <tr valign="top">
            <td style="font-family:Arial;min-height:60px;font-size:12px;line-height:14px;">
                This is my text that I need in 2 lines
            </td>
        </tr>

        <tr valign="top">
            <td style="font-size:12px;line-height:14px">
                Second Line
            </td>
        </tr>
    </tbody>
</table>

Wie Sie sehen können, sollte das erste tr/td eine Höhe von 60px (min-height:60px) haben, ist dies jedoch nicht.

Aus vielen Gründen kann ich die Höhe nicht direkt verwenden (dieser Code ist in einem Back-Office-System in einem Newsletter formatiert).

Wie kann ich also die ganze Höhe auf der Min-Höhe des TD-Trought nehmen?

Auch versucht, min-height:60px; auf tr zu setzen, aber nichts ändert sich ...

27
markzzz

min-heightfunktioniert nicht bei Tabellenelementen:

In CSS 2.1 ist der Effekt von 'min-width' und 'max-width' auf Tabellen, Inline-Tabellen, Tabellenzellen, Tabellenspalten und Spaltengruppen nicht definiert.

Ich kann nur davon ausgehen, dass dies auch für td und tr gilt.

Was immer funktionieren sollte, ist das Einbetten des Inhalts in ein div und das Anwenden von min-height, wie in dieses JSFiddle:

 <td style="font-family:Arial;min-height:60px;font-size:12px;line-height:14px;">
            <div style="min-height: 60px; background-color: green">
            This is my text that I need in 2 lines
            </div>
        </td>

Edit: Sie sagen, dass dies mit Outlook nicht funktioniert.

Alternative Idee: Platzieren Sie ein 60 px großes Bild in der td und machen Sie es float: left:

<td>
  <img src="..." style="float: left">
</td> 
35
Pekka 웃

Verwenden Sie <td height="60"> nicht die CSS-Höhe oder die Mindesthöhe

Für HTML-E-Mails setzen Sie Ihre Tabellenzelle als <td height="60"> und diese wird als Min-Höhe behandelt. Wenn Ihr Inhalt mehr als 60 Pixel beträgt, wird er entsprechend erweitert.

16
John

Fügen Sie ein DIV in die Zelle ein, und formatieren Sie stattdessen das DIV.

Min-Höhe funktioniert nicht auf Tabellen.

Es ist manchmal nützlich, die Höhe von Elementen auf einen bestimmten Bereich zu beschränken. Zwei Eigenschaften bieten diese Funktionalität: min-height & max-height

Diese können jedoch nicht für nicht ersetzte Inline-Elemente, Tabellenspalten und Spaltengruppen verwendet werden.

9
dg90

HTML:

<table></table>

CSS:

table{
    height:0px; /*Set any facultative length value to Height (percentage value doesn't work)*/
    min-height:100vh;
}

So löse ich dieses Problem immer ...

3
BBeta

Sie können min-height und min-width nicht einstellen, aber Sie können CSS3 verwenden, um denselben Effekt zu erzielen.

HTML:

<div class="default-table">
    <table>
        <tbody>
            <tr>
                <td>Steve</td>
                <td>Smith</td>
                <td>[email protected]</td>
            </tr>
            <tr>
                <td>Jone</td>
                <td>Polanski</td>
                <td>[email protected]</td>
            </tr>
        </tbody>
    </table>
</div>

CSS:

.default-table table {
    border-collapse: collapse; 
}
.default-table table td {
    padding: 0;
}

.default-table tr:before {
   width: 0px;
   content: '';
   float: left;
   overflow: hidden;
   height: 28px;
   font-size: 0;
}

.default-table {
   overflow:hidden;
}

aber wenn Sie in td zusammenbrechen oder auffüllen. Sie müssen für .default-table Tabelle minus Rand links angeben.

3
Davton

Hier ist eine Lösung, die in Outlook funktioniert (getestet) und anderen E-Mail-Clients:

<td style="mso-line-height-rule:exactly;line-height:300px;">&nbsp;</td>

Dies ist sauberer als die Verwendung eines Bildes, was sich negativ auf Ihre Spam-Bewertung auswirken kann und genau dasselbe tut.

Wenn Sie in <td> anderen Inhalt haben, der nicht die Zeilenhöhe haben soll, können Sie einfach den geschützten Bereich in einen <span> einschließen und den line-height für dieses Tag festlegen:

<td><span style="mso-line-height-rule:exactly;line-height:300px">&nbsp;</span>**Other content without 300px line-height here**</td>


Der Grund für height oder min-height für <div>-Tags und nicht für <td> ist, dass <td> auf display:table-cell eingestellt ist und height nicht auf dieselbe Weise wie display:block (<div>) -Elemente respektiert.

2
Alex W

Anzeigeblock hinzufügen

<td style="font-family:Arial;min-height:60px;font-size:12px;line-height:14px;display:block;">
2
DaveHogan

Ich habe dieses Problem durch Hinzufügen von display:block; zu seinem Stil als gelöst

<td style="display:block; min-height:200px;">
1
alamnaryab

Es könnte sein, dass ein Beitrag für 2012 wiederbelebt wird, für diejenigen, die diesen Beitrag wie mich gesucht und gefunden haben:

table tr:first-child td:before {
  min-height: 100px;
  display: block;
  content: ""
}
<table border="1">
  <tr>
    <td></td>
  </tr>
  <tr>
    <td></td>
  </tr>
</table>

0
Taha Paksu

Hier ist eine Lösung, die nicht von der Höhe in Pixel abhängt. Es funktioniert in allen E-Mail-Clients:

<table cellspacing="0" cellpadding="0" border="0" style="width:415px">
<tbody>
    <tr valign="top">
        <td style="font-family:Arial;font-size:12px;line-height:14px;">
            This is my text that I need in 2 lines
        </td>
        <td style="font-family:Arial;font-size:12px;line-height:14px;">
            <br/>&#xfeff;<br/>
        </td>

    </tr>

    <tr valign="top">
        <td style="font-size:12px;line-height:14px">
            Second Line
        </td>
    </tr>
</tbody>

Die Lösung fügt eine Spalte mit der Breite Null mit zwei Zeilen rechts von der ersten hinzu. Es verwendet das & # xfeff; Zeichen, das ein Leerzeichen mit Nullbreite ist.

0
Pavel Plachký