Twitter Bootstrap tabloları neden her zaman% 100 genişliğe sahiptir?

148

Bu işaretlemeyi varsayalım:

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

Kaç tane hücrem olduğuna gerek yok, tablo her zaman% 100 genişliktedir. Nedenmiş?

twitter-bootstrap

— Skowron satırı
kaynak

3

çünkü ebeveyn genişliğini verimli kullanır; ızgara sistemi bu şekilde çalışmalıdır!

— Vishal

Tablonuzun hangi genişlikte olmasını istiyorsunuz?

— Andres Ilich

1

Sıradan bir tablo gibi hücre sayısına

— bağımlı olmasını

1

Yayılma yoluyla div genişliği gibi nasıl set hücre genişliğine arama olanlar için kontrol bu cevabı

— alexche8

228

Bootstrap içindeki tüm tablolar, masanızı istediğiniz bir .span*ızgara elemanına yerleştirerek kolayca yapabileceğiniz konteynerlerine göre gerilir . Bu özelliği kaldırmak istiyorsanız, kendi tablo sınıfınızı oluşturabilir ve bunu içindeki içerikle genişletmek istediğiniz tabloya ekleyebilirsiniz:

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

Bu sınıfı kendi stil sayfanızın içine ekleyebilir ve tablonuzun kabına şöyle ekleyebilirsiniz:

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

Bu şekilde yaptığınız değişiklik, önyükleme stil sayfasının kendisini etkilemez (belgenizde başka bir yerde sıvı tablosu olmasını isteyebilirsiniz).

— Andres Ilich
kaynak

1

Tabloyu span * etiketinin içine yerleştirirseniz, tabloyu ortalamak için de bir ofset * ekler misiniz?

— HPWD

@dlackey Evet, ortalamak için tabloyu bir sınıfla dengeleyebilirsiniz, tablonuza .span*biraz genişlik vermek için bir sınıf bile ekleyebilirsiniz .

— Andres Ilich

2

Bootstrap 3 ile En azından sadece ekledikten sonra benim için çalıştı !importantetmekwidth: auto

— geekQ

bir tablo için bootstarp'ın span sınıfını kullanmalıyız, ya da .span sınıfı için elle bir stil vermeliyiz,

— Jot

1

Uyarı. .Table-Responsive ve .table-bordered ile birlikte kullanıldığında dikkatli olun. Kenarlık, ekran genişliği 767 pikselin altındayken .table duyarlı konteynere uygulanır. (bootstrap 3.x)

— Stuart

31

<table style="width: auto;" ...iyi çalışıyor. Chrome 38, IE 11 ve Firefox 34'te test edilmiştir.

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

— Razan Paul
kaynak

15

Bootstrap 4 kullanıyorsanız, tuşunu kullanın .w-auto.

Bkz. Https://getbootstrap.com/docs/4.1/utilities/sizing/

— Danko Durbić
kaynak

13

Cevap 1:

Neden kavga ediyorsun? Neden önyükleme ızgarasını kullanarak tablo genişliğinizi kontrol etmiyorsunuz? Bu Bootstrap 3 işaretlemesidir.

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

Bu, içeren elemanın genişliğinin yarısı (12'de 6) olan bir tablo oluşturur.

Bazen diğer cevaplara göre satır içi stiller kullanıyorum, ancak cesaretiniz kırılıyor.

Cevap No.2:

Bootstrap 4 kullanıyorsanız, genişlik için bazı güzel yardımcı sınıfları vardır:

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

Doküman: https://getbootstrap.com/docs/4.0/utilities/sizing/

— atmaca kösteği
kaynak

2

Bu en basit çözüm ve kabul edilen cevap olmalı

— Jeff Brown

12

Aynı sorunu yaşıyordum, tabloyu düzelttim ve td genişliğimi belirttim. Eğer inci varsa bunları da yapabilirsiniz.

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

<td width="10%" /td>

.Table-nonlucid ile hiç şansım olmadı.

— DDDD
kaynak

1

Deneyinwidth: auto !important;

— Leo

Önleyebilirsiniz !important(bu kötü bir uygulamadır ). Aşağıdaki yanıtın yorumuna bakın .

— Ollie Bennett

3

Eklemeye çalıştım style="width: auto !important"ve benim için harika çalışıyor!

— Sergey Dolgopolov
kaynak

1

Özel CSS'nizin Bootstrap CSS'den sonra göründüğünden emin olursanız (örn. Özel stiller <link>etiketiniz Bootstrap etiketinin altında görünür <link>), kurallar tasarlandığı gibi basamaklandırılır ve !importantistisnanızı kullanmanız gerekmez . Çünkü bu doğrudur width: 100%;için tanımlanan tableyılında Önyükleme CSS ve böylece yerini almakta width: auto;kuralı.

— Ollie Bennett

Gerçekten bir cevap değil, çoğu insanın okuduğu kabul edilen cevabı düzenlemek daha iyi (şimdi düzenledim) .

— Iulian Onofrei