Haben erste Spalte in HTML-Tabelle flexibel, wenn Tabelle Breite = 100%

Question

Ich habe eine HTML-Tabelle mit 8 Spalten und mehreren Zeilen. Der Inhalt jeder Zelle wird dynamisch generiert, und es ist schwierig, die Breite einer Spalte vorherzusagen. Ich setze die Tabellenbreite = 100%, da ich möchte, dass die Tabelle die gesamte Breite des divs einnimmt. Ich möchte, dass die Spalten 2 bis 8 genauso bleiben wie die Breite, als hätte ich keine Tischbreite eingestellt. Dann möchte ich, dass die erste Spalte ihre Breite erweitert, so dass die Tischbreite 100% wird. Ist das möglich?

Answer 1

Setzen Sie explizite Breiten für 2 - 8 und Zelle 1 bestimmt ihre eigene Breite mit dem verbleibenden Platz. Sie können auch den Zeilenumbruch für das Leerzeichen in der ersten Zelle festlegen, damit der Inhalt nicht umgebrochen wird, sondern die Zelle zwingen, bei Bedarf zu wachsen.

Answer 2

Ich denke, Ihre Frage ist nicht vollständig, weil wörtlich gelesen, die Antwort ist, keine Spaltenbreiten überhaupt setzen. Jede Spalte nimmt so viel Platz wie möglich, und sie verteilen sie irgendwie untereinander.

Können Sie klarstellen, was Sie erreichen möchten?

Answer 3

<div> 
<table width="100%"> 
<tr> 
<td width="100%"></td> <- this is col 1 
<td></td><td></td><td></td><td></td><td></td><td></td><td></td> <- cols 2-8 
</tr> 
</table> 
</div> 

durch die erste Zelle auf 100%, wird es diese Zelle zwingen, um zu versuchen, so weit wie möglich zu sein, während immer noch die Breiten des Restes der Zellen zu respektieren. Wenn die Zellen 2-8 Text enthalten, können Sie hinzufügen, dass der Text in diesen Zellen nicht umbrochen wird, weil die erste Zelle versucht, 100% Breite zu haben.

Answer 4

Legen Sie eine Breite auf dem Tisch und auf allen anderen Spalten fest; die restliche Spalte wird den ganzen Spielraum einnehmen.

Der Trick besteht darin, table-layout: fixed Stil zu verwenden, so dass der automatische Layouterätzungsalgorithmus (und IEs besonders schlechte Interpretation davon) nicht einschreitet und durcheinander bringt, wenn größere Mengen als erwartet in einer Spalte enthalten sind.

Im festen Layout-Modus legt die erste Zeile der Zellen oder <col> Elemente die Breite fest; Weitere Reihen beeinflussen die Breiten nicht. Dies beschleunigt das Rendern. Sie sollten für jede Tabelle ein festes Layout verwenden.

<table> 
    <col class="name" /><col class="data" /><col class="data" /><col class="data" /> 
    <col class="data" /><col class="data" /><col class="data" /><col class="data" /> 
    <tr> 
     <td>tiddle om pom pom</td> 
     <td>1</td><td>2</td><td>3</td><td>4</td><td>5</td><td>6</td><td>7</td> 
    </tr> 
</table> 

table { width: 100%; table-layout: fixed; } 
col.data { width: 2em; }