Perché le tabelle Bootstrap di Twitter hanno sempre una larghezza del 100%?

148

Supponiamo che questo markup:

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

Non so quante celle ho, la tabella ha sempre una larghezza del 100%. Perché?

twitter-bootstrap

— Skowron-line
fonte

3

perché utilizza in modo efficiente la larghezza dei suoi genitori; è così che dovrebbe funzionare il sistema a griglia!

— Vishal,

Che larghezza vuoi che sia il tuo tavolo?

— Andres Ilich,

1

Vorrei che dipendesse dal numero di celle, proprio come una normale tabella

— skowron-line

1

Per coloro che cercano come impostare la larghezza della cella come la larghezza div tramite span, controlla questa risposta

— alexche8

228

Tutti i tavoli all'interno del bootstrap si allungano in base al loro contenitore, cosa che puoi fare facilmente posizionando il tuo tavolo all'interno di un .span*elemento griglia di tua scelta. Se si desidera rimuovere questa proprietà, è possibile creare la propria classe di tabella e semplicemente aggiungerla alla tabella che si desidera espandere con il contenuto all'interno di:

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

Puoi aggiungere questa classe all'interno del tuo foglio di stile e semplicemente aggiungerla al contenitore della tabella in questo modo:

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

In questo modo la modifica non influirà sul foglio di stile bootstrap stesso (potresti voler avere una tabella fluida da qualche altra parte nel tuo documento).

— Andres Ilich
fonte

1

Se si posiziona la tabella all'interno di un tag span *, al fine di centrare la tabella, includerebbe anche un offset *?

— HPWD,

@dlackey Sì, puoi compensare la tabella con una classe per centrare, puoi persino aggiungere una .span*classe alla tua tabella per dargli una certa larghezza.

— Andres Ilich,

2

Almeno con bootstrap 3 ha funzionato solo per me dopo aver aggiunto !importantawidth: auto

— geekQ il

dobbiamo usare la classe span di bootstarp per una tabella, oppure dobbiamo dare manualmente uno stile per la classe .span,

— Jot Dhaliwal,

1

Avvertimento. Fare attenzione se usato in combinazione con .table-responsive e .table-bordered. Il bordo viene applicato al contenitore .table-responsive quando la larghezza dello schermo è inferiore a 767px. (bootstrap 3.x)

— Stuart

31

<table style="width: auto;" ...funziona bene. Testato su Chrome 38, IE 11 e Firefox 34.

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

— Razan Paul
fonte

15

Se stai usando Bootstrap 4, usa .w-auto.

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

— Danko Durbić
fonte

13

Risposta 1:

Perché combatterlo? Perché non controllare semplicemente la larghezza della tabella usando la griglia bootstrap? Questo è il markup Bootstrap 3.

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

Questo creerà una tabella che è la metà (6 su 12) della larghezza dell'elemento contenitore.

A volte uso stili in linea come per le altre risposte, ma è scoraggiato.

Risposta n. 2:

Se stai usando bootstrap 4, ha delle belle classi di supporto per larghezza come:

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

Ecco il documento: https://getbootstrap.com/docs/4.0/utilities/sizing/

— Jess
fonte

2

questa è di gran lunga la soluzione più semplice e dovrebbe essere la risposta accettata

— Jeff Brown,

12

Avevo lo stesso problema, ho sistemato la tabella e poi ho specificato la mia larghezza td. Se hai questo puoi fare anche quelli.

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

<td width="10%" /td>

Non ho avuto fortuna con .table-nonfluid.

— DDDD
fonte

1

Provawidth: auto !important;

— Leo,

Puoi evitare !important(è una cattiva pratica ). Vedi il commento su una risposta qui sotto .

— Ollie Bennett,

3

Ho provato ad aggiungere style="width: auto !important"e funziona benissimo per me!

— Sergey Dolgopolov
fonte

1

Se ti assicuri che il tuo CSS personalizzato appaia dopo il Bootstrap CSS (ad es. Il tuo <link>tag di stili personalizzati appare sotto il <link>tag Bootstrap ), allora le regole verranno applicate a cascata come previsto e non dovresti usare !importantaffatto la tua eccezione. Questo è vero perché width: 100%;è definito tablenel CSS Bootstrap e quindi sta sostituendo la tua width: auto;regola.

— Ollie Bennett,

Non proprio una risposta, meglio modificare l'attuale risposta accettata che la maggior parte delle persone legge (l'ho modificata ora) .

— Iulian Onofrei,