Tabelle mit 100% Breite und gleich großen Spalten

77

Ich muss dynamisch eine Tabelle mit einer variablen Anzahl von Spalten erstellen, die zur Laufzeit festgelegt wird.

Kann mir jemand sagen, ob es möglich ist, eine HTML-Tabelle mit Spalten gleicher Größe zu haben, die vollständig gestreckt sind?

html css Andrei Ciobanu
quelle
5
Die Antwort unten (mit vielen Stimmen) sollte als akzeptierte Antwort markiert werden, da sie korrekter ist und das Problem allgemein löst.
Micros
1
Und verlässt sich nicht darauf, dass Sie einen genauen Inhalt wie die erste Antwort haben.
Fredy31

Antworten:

57 
<table width="400px">
  <tr>
  <td width="100px"></td>
  <td width="100px"></td>
  <td width="100px"></td>
  <td width="100px"></td>
  </tr>
</table>

Verwenden Sie für die variable Anzahl von Spalten%

<table width="100%">
  <tr>
  <td width="(100/x)%"></td>
  </tr>
</table>

Dabei ist 'x' die Anzahl der Spalten

Salil
quelle
4
+1 für den zweiten Ansatz. Aber 400 was, Füße? Zoll? Zentimeter? Pixel? Verwenden Sie Einheiten. :)
ANeves denkt, SE ist böse
2
Genau darum geht es. Das erste Beispiel ist der verwendeten Einheit gleichgültig.
Carlos Melo
2
Berücksichtigt dies die Grenzen von tr und tds? Ich vermute nicht.
Ninad
Ich habe mich geirrt. Ich habe das gerade ausprobiert. Es hat funktioniert. Ich habe Ränder für 32 Spalten.
Ninad
4
Duplikat von stackoverflow.com/questions/5055299/…, wo eine interessante Antwort platziert wurde.
Alberto
196

Wenn Sie nicht wissen, wie viele Spalten Sie haben werden, die Deklaration

table-layout: fixed

zusammen mit nicht alle Spaltenbreiten einstellen , würde implizieren , dass Browser die gesamte Breite gleichmäßig teilen - egal was passiert.

Dies kann auch das Problem bei diesem Ansatz sein. Wenn Sie diesen verwenden, sollten Sie auch überlegen, wie mit Überlauf umgegangen werden soll.

orszaczky
quelle
Ich möchte diesen Ansatz für eine Vollbildtabelle ohne Überlauf verwenden. Wie viele Spalten würde es erstellen? Können Sie bitte eine Demo einrichten, um sie besser zu verstehen?
ProgramCpp
3
jsfiddle.net/5babcvg4 Sie erstellen eine Tabelle mit so vielen Spalten, wie Sie möchten, und fügen dann die Deklaration zur Tabelle hinzu.
Orszaczky
16
Beachten Sie, dass die Tabellenbreite eingestellt werden muss (z width: 100%;. B. ).
Skippy le Grand Gourou
1
Perfekte Lösung.
Sergi
7

ALLES, WAS SIE ZU TUN HABEN:

HTML:

<table id="my-table"><tr>
<td> CELL 1 With a lot of text in it</td>
<td> CELL 2 </td>
<td> CELL 3 </td>
<td> CELL 4 With a lot of text in it </td>
<td> CELL 5 </td>
</tr></table>

CSS:

#my-table{width:100%;} /*or whatever width you want*/
#my-table td{width:2000px;} /*something big*/

Wenn Sie haben th, müssen Sie es auch so einstellen:

#my-table th{width:2000px;}
Aroykos
quelle
2
das funktioniert bei mir nicht. Können Sie ein funktionierendes Beispiel liefern?
Michał Rybak
funktioniert jetzt - ich habe den td { width: 100% }Ansatz schon einmal ausprobiert und das hat nicht funktioniert, 2000pxfunktioniert aber gut.
Michał Rybak
Dies ist die beste Antwort, auch wenn die Funktionsweise von HTML / CSS abscheulich ist.
Charles Goodwin
Dies funktioniert nicht, wenn Sie haben very_long_wordsoder wenn Ihre Zeile die enthält <pre>Some long text</pre>. Von allen Antworten hier hat nur Orszaczky table-layout: fixedfür mich gearbeitet.
Conchylicultor
1

Fügen Sie einfach ein style="table-layout: fixed ; width: 100%;"Inside- <table>Tag hinzu und auch, wenn Sie keine Stile angeben und nur style=" width: 100%;"innerhalb hinzufügen. <table>Sie können es auflösen.

Sineth Lakshitha
quelle
0 
table {
    width: 100%;

    th, td {
        width: 1%;
    }
}

SCSS-Syntax

S. Esteves
quelle