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

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

15

Wenn Sie Bootstrap 4 verwenden, verwenden Sie .w-auto.

Siehe https://getbootstrap.com/docs/4.1/utilities/sizing/

— Danko Durbić
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