Dlaczego tabele Twitter Bootstrap zawsze mają 100% szerokości?

148

Załóżmy, że ten znacznik:

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

Bez względu na to, ile mam komórek, tabela ma zawsze 100% szerokości. Dlaczego tak jest?

twitter-bootstrap skowron-line
źródło
3
ponieważ efektywnie wykorzystuje szerokość swoich rodziców; tak powinien działać system grid!
Vishal
Jaką szerokość ma mieć Twój stół?
Andres Ilich
1
Chciałbym, żeby zależało to od ilości komórek, tak jak zwykła tabela
skowron-line
1
Dla tych, którzy szukają, jak ustawić szerokość komórki, taką jak szerokość div przez span, sprawdź tę odpowiedź
alexche8

Odpowiedzi:

228

Wszystkie stoły w module bootstrap są rozciągane zgodnie z ich pojemnikiem, co można łatwo zrobić, umieszczając stół w .span*wybranym elemencie siatki. Jeśli chcesz usunąć tę właściwość, możesz utworzyć własną klasę tabeli i po prostu dodać ją do tabeli, którą chcesz rozszerzyć, zawierającą zawartość:

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

Możesz dodać tę klasę do własnego arkusza stylów i po prostu dodać ją do kontenera swojej tabeli w następujący sposób:

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

W ten sposób twoja zmiana nie wpłynie na sam arkusz stylów bootstrap (możesz chcieć mieć płynną tabelę w innym miejscu w dokumencie).

Andres Ilich
źródło
1
Jeśli umieścisz tabelę wewnątrz tagu span *, aby wyśrodkować stół, czy po prostu dołączysz również przesunięcie *?
HPWD
@dlackey Tak, możesz przesunąć stół klasą, aby wyśrodkować, możesz nawet dodać .span*klasę do swojego stołu, aby nadać mu pewną szerokość.
Andres Ilich
2
Przynajmniej z bootstrapem 3 zadziałało tylko dla mnie po dodaniu !importantdowidth: auto
geekQ
musimy użyć klasy span bootstarp dla tabeli lub ręcznie nadać styl dla klasy .span,
Jot Dhaliwal
1
Ostrzeżenie. Zachowaj ostrożność, jeśli jest używany w połączeniu z .table-responsive i .table-bordered. Obramowanie jest stosowane do kontenera .table-responsive, gdy szerokość ekranu jest mniejsza niż 767 pikseli. (bootstrap 3.x)
Stuart
13

Odpowiedź 1:

Po co z tym walczyć? Dlaczego po prostu nie kontrolować szerokości stołu za pomocą siatki bootstrap? To jest znacznik Bootstrap 3.

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

Spowoduje to utworzenie tabeli o połowie (6 z 12) szerokości elementu zawierającego.

Czasami używam stylów wbudowanych zgodnie z innymi odpowiedziami, ale jest to odradzane.

Odpowiedź nr 2:

Jeśli używasz bootstrap 4, ma kilka fajnych klas pomocniczych dla szerokości, takich jak:

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

Oto dokument: https://getbootstrap.com/docs/4.0/utilities/sizing/

Pęto
źródło
2
jest to zdecydowanie najprostsze rozwiązanie i powinno być akceptowaną odpowiedzią
Jeff Brown
12

Miałem ten sam problem, naprawiłem tabelę, a następnie określiłem szerokość td. Jeśli masz, możesz to zrobić.

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

<td width="10%" /td>

Nie miałem szczęścia z .table-nonfluid.

DDDD
źródło
1
Spróbujwidth: auto !important;
Leo
Możesz tego uniknąć !important(to zła praktyka ). Zobacz komentarz do odpowiedzi poniżej .
Ollie Bennett
3

Próbowałem dodać style="width: auto !important"i działa świetnie dla mnie!

Sergey Dolgopolov
źródło
1
Jeśli upewnisz się, że twój niestandardowy CSS pojawia się po Bootstrap CSS (np. Twój niestandardowy <link>tag stylów pojawia się poniżej<link> tagu Bootstrap ), wtedy reguły będą kaskadowane zgodnie z projektem i nie powinieneś w ogóle potrzebować swojego !importantwyjątku. Jest to prawdą, ponieważ width: 100%;zostało zdefiniowane dla tablew Bootstrap CSS, a więc zastępuje Twoją width: auto;regułę.
Ollie Bennett
Niezupełnie odpowiedź, lepiej edytować aktualnie zaakceptowaną odpowiedź, którą przeczytała większość ludzi (teraz ją zredagowałem) .
Iulian Onofrei