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

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

31

<table style="width: auto;" ...działa w porządku. Testowane w Chrome 38, IE 11 i Firefox 34.

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

— Razan Paul
źródło

15

Jeśli używasz Bootstrap 4, użyj .w-auto.

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

— Danko Durbić
źródło

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