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

<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?

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.

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/

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.

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>