HTML-Tabelle: Behalten Sie die gleiche Breite für Spalten bei

77

Ich habe eine Tabelle mit mehreren Gruppen von Spalten. Die Tabelle ist größer als meine Seite, daher kann ich einige dieser Gruppen ein- / ausblenden, damit sie auf die Seite passen. Die anfängliche Tabelle sieht gut aus: Alle Spalten sind innerhalb einer Gruppe ungefähr gleich breit. Aber wenn ich eine Gruppe verstecke, haben die Spalten nicht mehr die gleiche Breite und es sieht schlecht aus.

Beispiel: http://www.reviews-web-hosting.com/companies/apollohosting.html (defekter Link)

Bisher sieht der Tisch gut aus. Klicken Sie auf >>. Die erste Spalte unter "E-Commerce Pro" ist viel breiter als die anderen Spalten unter "E-Commerce Pro", es sieht seltsam aus. Klicken Sie auf <<, diesmal ist die erste Spalte unter "Wert" zu breit. Zumindest auf Firefox.

Ich habe versucht zu verwenden 

<colgroup><col /><col span="5" />...

aber kein Glück. Wenn ich eine Spalte auf style = "display: none" setze, wird der Satz von Spalten weiterhin angezeigt.

Gibt es einen HTML / CSS-Tipp, um die Spalten innerhalb einer Gruppe gleich breit zu halten?

Bearbeiten:

  • Um eine Spalte auszublenden, muss ich Sichtbarkeit verwenden: Reduzieren
  • es scheint sich jetzt gut zu ändern, ich weiß nicht warum
html css Julien
quelle
Der Authentifizierungsdialog verhindert, dass ich die Site verwenden kann.
Diodeus - James MacFarlane
Es hindert mich nur daran, einige Bilder zu sehen.
Iain M Norman
Das ist ein falscher .htaccess, der nach einer Authentifizierung fragt, um die Bilder unter / sites zu erhalten. Ich werde es heute Abend reparieren. Ich arbeite immer noch am Aufbau der Website.
Julien

Antworten:

198

Wenn Sie den Stil table-layout: fixed;für Ihre Tabelle festlegen , können Sie die automatische Größenänderung des Browsers überschreiben. Der Browser legt dann die Spaltenbreiten basierend auf der Breite der Zellen in der ersten Zeile der Tabelle fest. Ändern Sie Ihr <thead>zu <caption>und entfernen Sie das <td>Innere davon, und legen Sie dann feste Breiten für die Zellen in fest <tbody>.

Ole Helgesen
quelle
11
Die einzige Modifikation des Hinzufügens table-layout: fixed;löste das gleiche Problem für mich (FFox 11).
Heltonbiker
11
Was bringt es, das Tabellenlayout zu verwenden, wenn Sie die Zellenbreite festlegen müssen?
Jokoon
20

Geben Sie diesen Stil an td: width: 1%;

Ton Škoda
quelle
2
Mit einer unbekannten Anzahl von Spalten ist dies tatsächlich der Trick, wenn die Tabelle selbst eine feste Breite hat oderwidth: 100%
Lars Ebert
0

In Ihrem Fall, da Sie nur 3 Spalten anzeigen:

Name    Value       Business
  or
Name    Business    Ecommerce Pro

Warum nicht alle 3 auf eine Breite von 33,3% einstellen? da nur 3 jemals auf einmal gezeigt, der Browser sollte sie alle eine ähnliche Breite machen.

scunliffe
quelle
5
Die Anzahl der Zellen kann sich ändern, wenn ich verschiedene Spalten ein- / ausblende
Julien
0

Nun, warum drückst du nicht die Seitenleiste los und drückst den Tisch so, dass er keinen Ein- / Ausblendeffekt hat? Es sieht jetzt seltsam für mich aus. Der Tisch ist zu robust.
Ansonsten denke ich, dass Scunliffes Vorschlag es tun sollte. Wenn Sie möchten, können Sie auch einfach die genaue Breite der Tabelle festlegen und entweder den Prozentsatz oder die Pixelbreite für Tabellenzellen festlegen.

Adriana
quelle
Einige Tische sind viel zu groß, Ereignis ohne Seitenleiste.
Julien