Warum haben Twitter Bootstrap-Tabellen immer eine Breite von 100%?

148

Angenommen, dieses Markup:

<table class="table table-bordered" align="center">

Egal wie viele Zellen ich habe, die Tabelle ist immer 100% breit. Warum ist das?

twitter-bootstrap Skowron-Linie
quelle
3
weil es die Breite seiner Eltern effizient nutzt; So sollte das Rastersystem funktionieren!
Vishal
Welche Breite soll Ihr Tisch haben?
Andres Ilich
1
Ich möchte, dass es von der Anzahl der Zellen abhängt, genau wie bei einer normalen Tabelle
Skowron-Linie
1
Für diejenigen, die suchen, wie man die
Zellenbreite

Antworten:

228

Alle Tabellen im Bootstrap werden entsprechend ihrem Container gedehnt. Dies können Sie einfach tun, indem Sie Ihre Tabelle in ein .span*Rasterelement Ihrer Wahl platzieren. Wenn Sie diese Eigenschaft entfernen möchten, können Sie Ihre eigene Tabellenklasse erstellen und sie einfach der Tabelle hinzufügen, die Sie mit dem Inhalt erweitern möchten:

.table-nonfluid {
   width: auto !important;
}

Sie können diese Klasse in Ihr eigenes Stylesheet einfügen und sie einfach wie folgt zum Container Ihrer Tabelle hinzufügen:

<table class="table table-nonfluid"> ... </table>

Auf diese Weise wirkt sich Ihre Änderung nicht auf das Bootstrap-Stylesheet selbst aus (möglicherweise möchten Sie eine flüssige Tabelle an einer anderen Stelle in Ihrem Dokument haben).

Andres Ilich
quelle
1
Wenn Sie die Tabelle in einem span * -Tag platzieren, um die Tabelle zu zentrieren, würden Sie auch nur einen Offset * einfügen?
HPWD
@dlackey Ja, Sie können die Tabelle mit einer Klasse versetzen, um sie zu zentrieren. Sie können .span*Ihrer Tabelle sogar eine Klasse hinzufügen , um ihr eine gewisse Breite zu verleihen.
Andres Ilich
2
Zumindest mit Bootstrap 3 funktionierte es nur für mich, nachdem ich !importantes am width: auto
6.
Wir müssen die span-Klasse von bootstarp für eine Tabelle verwenden, oder wir müssen manuell einen Stil für die .span-Klasse angeben,
Jot Dhaliwal
1
Warnung. Seien Sie vorsichtig, wenn Sie es in Kombination mit .table-responsive und .table-bordered verwenden. Der Rahmen wird unterhalb der Bildschirmbreite 767px auf den auf .table reagierenden Container angewendet. (Bootstrap 3.x)
Stuart
31

<table style="width: auto;" ...funktioniert gut. Getestet in Chrome 38, IE 11 und Firefox 34.

jsfiddle: http://jsfiddle.net/rpaul/taqodr8o/

Razan Paul
quelle
13

Antwort 1:

Warum dagegen ankämpfen? Warum steuern Sie nicht einfach Ihre Tabellenbreite mithilfe des Bootstrap-Rasters? Dies ist das Bootstrap 3-Markup.

<div class="row">
    <div class="col-sm-6">
        <table></table>
    </div>
</div>

Dadurch wird eine Tabelle erstellt, die die Hälfte (6 von 12) der Breite des enthaltenen Elements beträgt.

Ich verwende manchmal Inline-Stile gemäß den anderen Antworten, aber es wird davon abgeraten.

Antwort 2:

Wenn Sie Bootstrap 4 verwenden, gibt es einige nette Hilfsklassen für die Breite wie:

w-25, w-50, w-75, and w-100

Hier ist das Dokument: https://getbootstrap.com/docs/4.0/utilities/sizing/

Jess
quelle
2
Dies ist bei weitem die einfachste Lösung und sollte die akzeptierte Antwort sein
Jeff Brown
12

Ich hatte das gleiche Problem, habe die Tabelle repariert und dann meine td-Breite angegeben. Wenn Sie das haben, können Sie das auch tun.

<style>
table {
table-layout: fixed;
word-wrap: break-word;
}
</style>

<td width="10%" /td>

Ich hatte kein Glück mit .table-nonfluid.

DDDD
quelle
1
Versuchen Siewidth: auto !important;
Leo
Sie können vermeiden !important(es ist eine schlechte Praxis ). Siehe Kommentar zu einer Antwort unten .
Ollie Bennett
3

Ich habe versucht hinzuzufügen style="width: auto !important"und funktioniert gut für mich!

Sergey Dolgopolov
quelle
1
Wenn Sie sicherstellen, dass Ihr benutzerdefiniertes CSS nach dem Bootstrap-CSS angezeigt wird (z. B. wird Ihr <link>Tag für benutzerdefinierte Stile unter dem Bootstrap- Tag angezeigt <link>), werden die Regeln wie vorgesehen kaskadiert , und Sie sollten Ihre !importantAusnahme überhaupt nicht verwenden müssen . Dies gilt , da width: 100%;für definiert ist tablein der Bootstrap CSS und so Ihre ist ablöst width: auto;Regel.
Ollie Bennett
Keine wirkliche Antwort, besser die aktuell akzeptierte Antwort zu bearbeiten, die die meisten Leute lesen (ich habe sie jetzt bearbeitet) .
Iulian Onofrei