Wie kann ich die maximale Breite einer Tabellenzelle mithilfe von Prozentsätzen festlegen?

100

<table>
<tr>
<td>Test</td>
<td>A long string blah blah blah</td>
</tr>
</table>

<style>
td{max-width:67%;}
</style>

Das obige funktioniert nicht. Wie kann ich die maximale Breite einer Tabellenzelle mithilfe von Prozentsätzen festlegen?

html css html-table

— Leo Jiang
quelle

Bitte erweitern Sie auf "funktioniert nicht" .

— Sparky

1

Sie müssen sicherstellen, dass die ELTERN Ihres td eine bestimmte Breite haben (sei es, dass Sie die Breite: 100% übergeben; vom Körper bis zu Ihrem td, oder Sie können dem Elternteil (hier: tr) 1000px oder was auch immer Sie bevorzugen geben Bei Verwendung von %% in CSS wird immer der exakte px verwendet, der im übergeordneten Element definiert ist, und der px wird dann für die Kinder in %% umgewandelt, da sie eine Größe relativ zu ihrem übergeordneten Element haben .

— Philipp Meissner

Für die Aufzeichnung funktioniert die maximale Breite jetzt in Safari und Chrome. Ich bin nicht sicher, wie lange es unterstützt wurde.

— Jacob

71

Gemäß der Definition der maximalen Breite in der CSS 2.1-Spezifikation ist „die Auswirkung von 'min-width' und 'max-width' auf Tabellen, Inline-Tabellen, Tabellenzellen, Tabellenspalten und Spaltengruppen undefiniert.“ Sie können also die maximale Breite für ein td-Element nicht direkt festlegen.

Wenn Sie nur möchten, dass die zweite Spalte höchstens 67% einnimmt, können Sie die Breite (dh die minimale Breite für Tabellenzellen) auf 33% festlegen, z. B. im Beispielfall

td:first-child { width: 33% ;}

Das Einstellen für beide Spalten funktioniert nicht so gut, da Browser dazu neigen, den Spalten die gleiche Breite zu geben.

— Jukka K. Korpela
quelle

Tatsächlich funktioniert die maximale Breite jetzt in Safari und Chrome. Ich bin nicht sicher, wie lange es unterstützt wurde.

— Jacob

114

Alte Frage, die ich kenne, aber dies ist jetzt mithilfe der CSS-Eigenschaft table-layout: fixedfür das Tabellen-Tag möglich. Beantworten Sie unten aus dieser Frage die prozentuale CSS-Breite und den Textüberlauf in einer Tabellenzelle

Dies lässt sich leicht mit verwenden table-layout: fixed, ist jedoch etwas schwierig, da nicht viele Leute über diese CSS-Eigenschaft Bescheid wissen.

table {
  width: 100%;
  table-layout: fixed;
}

Sehen Sie es in Aktion bei der aktualisierten Geige hier: http://jsfiddle.net/Fm5bM/4/

— superphonisch
quelle

2

Vielen Dank! Ich befürchtete, dass feste Mittel die Breite von Zellen, für die keine Breite eingestellt ist, nicht neu berechnen, aber zum Glück ist dies nicht der Fall.

— fassl

4

Wenn ich in Ihrer jsfiddle die width-Eigenschaften entferne, funktioniert die maximale Breite immer noch nicht. Sie sind sich also nicht sicher, wie dies das Problem löst.

— Frezq

4

@superphonic Ich denke du bist verwirrt. Wenn Sie die max-widthin dieser jsfiddle entfernen , bleibt die Breite gleich, so dass es nicht die ist max-width, die sie festlegt. Es könnte klarer sein, wenn Sie es max-width: 10%zum ersten Mal durch ein ersetzen td... Sie werden sehen, dass es sich nicht ändert. jsfiddle.net/w3f8ey22/1

— frezq

4

Tabellenlayout: Behoben löst das OP-Problem nicht. Es bewirkt nicht auf magische Weise, dass 'min-width' für eine Tabellenzelle funktioniert. Beide referenzierten Geigen haben keinen Unterschied in der Anzeige, wenn Tabellenlayout: fest entfernt wird.

— Cmerriman

2

Diese Antwort ist irreführend, da sie nicht mit der Frage zusammenhängt

— Zoltán Süle

8

Ich weiß, dass dies buchstäblich ein Jahr später ist, aber ich dachte, ich würde es teilen. Ich habe versucht, das Gleiche zu tun, und bin auf diese Lösung gestoßen, die für mich funktioniert hat. Wir haben eine maximale Breite für die gesamte Tabelle festgelegt und dann mit den Zellengrößen für den gewünschten Effekt gearbeitet.

Fügen Sie die Tabelle in ein eigenes div ein und stellen Sie dann die Breite, minimale und / oder maximale Breite des div wie gewünscht für die gesamte Tabelle ein. Anschließend können Sie die Breite und die Min-Breite für andere Zellen und die maximale Breite für das Div bearbeiten und festlegen, um die gewünschte maximale Breite zu erreichen.

<div id="tablediv">
<table width="100%">
 <tr>
  <td class="tdleft">Test</td>
  <td>A long string blah blah blah</td>
 </tr>
</table>
</div>

Dann setzen Sie in Ihren Stilen:

#tablediv {
    width:90%;
    min-width:800px
    max-width:1500px;
}
.tdleft {
    width:20%;
    min-width:200px;
}

Dies gibt Ihnen zwar keine "maximale" Breite einer Zelle an sich, ermöglicht jedoch eine Steuerung, die anstelle einer solchen Option funktionieren könnte. Ich bin mir nicht sicher, ob es für Ihre Bedürfnisse funktioniert. Ich weiß, dass es für unsere Situation funktioniert hat, in der die Navigationsseite auf der Seite bis zu einem Punkt vergrößert und verkleinert werden soll, aber heutzutage für alle Breitbildschirme.

— Damon
quelle

0

Der Prozentsatz sollte relativ zu einer absoluten Größe sein. Versuchen Sie Folgendes:

<table>
<tr>
<td>Testasdas 3123 1 dasd as da</td>
<td>A long string blah blah blah</td>
</tr>
</table>

<style>
table{width:200px;}
td{width:65%;border:1px solid black;}
</style>

— dov.amir
quelle