Mengapa tabel Bootstrap Twitter selalu memiliki lebar 100%?

148

Misalkan markup ini:

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

Tidak masalah berapa banyak sel yang saya miliki, tabel selalu 100% lebar. Kenapa begitu?

twitter-bootstrap

— skowron-line
sumber

3

karena efisien menggunakan lebar orang tuanya; begitulah sistem grid seharusnya bekerja!

— Vishal

Berapa lebar meja yang Anda inginkan?

— Andres Ilich

1

Saya ingin ini tergantung pada jumlah sel, seperti tabel biasa

— skowron-line

1

Bagi mereka yang mencari cara mengatur lebar sel seperti lebar div melalui rentang periksa jawaban ini

— alexche8

228

Semua tabel dalam rentang bootstrap sesuai dengan wadahnya, yang dapat Anda lakukan dengan mudah dengan menempatkan meja Anda di dalam .span*elemen kisi pilihan Anda. Jika Anda ingin menghapus properti ini, Anda dapat membuat kelas tabel Anda sendiri dan menambahkannya ke tabel yang ingin Anda kembangkan dengan konten di dalamnya:

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

Anda bisa menambahkan kelas ini di dalam stylesheet Anda sendiri dan cukup menambahkannya ke wadah tabel Anda seperti ini:

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

Dengan cara ini perubahan Anda tidak akan memengaruhi bootstrap stylesheet itu sendiri (Anda mungkin ingin memiliki tabel cairan di tempat lain dalam dokumen Anda).

— Andres Ilich
sumber

1

Jika Anda menempatkan tabel di dalam tag span *, untuk memusatkan tabel, apakah Anda hanya menyertakan offset * juga?

— HPWD

@dlackey Ya, Anda dapat mengimbangi tabel dengan kelas untuk pusat, Anda bahkan dapat menambahkan .span*kelas ke meja Anda untuk memberikannya lebar.

— Andres Ilich

2

Setidaknya dengan bootstrap 3 itu hanya bekerja untuk saya setelah menambahkan !importantkewidth: auto

— geekQ

kita harus menggunakan kelas span bootstarp untuk sebuah tabel, atau kita harus secara manual memberikan gaya untuk kelas .span,

— Jot Dhaliwal

1

Peringatan. Hati-hati jika digunakan dalam kombinasi dengan .table-responsif dan .table-bordered. Perbatasan diterapkan ke wadah .tabel-responsif ketika di bawah lebar layar 767px. (bootstrap 3.x)

— Stuart

31

<table style="width: auto;" ...bekerja dengan baik. Diuji di Chrome 38, IE 11 dan Firefox 34.

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

— Razan Paul
sumber

15

Jika Anda menggunakan Bootstrap 4, gunakan .w-auto.

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

— Danko Durbić
sumber

13

Jawaban 1:

Mengapa melawannya? Mengapa tidak hanya mengontrol lebar tabel Anda menggunakan kisi bootstrap? Ini markup Bootstrap 3.

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

Ini akan membuat tabel yang setengah (6 dari 12) dari lebar elemen yang mengandung.

Saya kadang-kadang menggunakan gaya sebaris sesuai jawaban lain, tetapi tidak disarankan.

Jawaban # 2:

Jika Anda menggunakan bootstrap 4, ia memiliki beberapa kelas pembantu yang bagus untuk lebar seperti:

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

Inilah dokumennya: https://getbootstrap.com/docs/4.0/utilities/sizing/

— Jess
sumber

2

sejauh ini ini adalah solusi paling sederhana dan harus menjadi jawaban yang diterima

— Jeff Brown

12

Saya mengalami masalah yang sama, saya membuat tabel diperbaiki dan kemudian menentukan lebar td saya. Jika Anda memiliki Anda dapat melakukannya juga.

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

<td width="10%" /td>

Saya tidak beruntung dengan .tabel-nonfluid.

— DDDD
sumber

1

Cobawidth: auto !important;

— Leo

Anda dapat menghindari !important(ini adalah praktik yang buruk ). Lihat komentar pada jawaban di bawah ini .

— Ollie Bennett

3

Saya sudah mencoba menambahkan style="width: auto !important"dan bekerja sangat baik untuk saya!

— Sergey Dolgopolov
sumber

1

Jika Anda memastikan bahwa CSS khusus Anda muncul setelah Bootstrap CSS (mis. <link>Tag gaya khusus Anda muncul di bawah<link> tag Bootstrap ), maka aturan akan mengalir seperti yang dirancang, dan Anda tidak perlu menggunakan !importantpengecualian sama sekali. Ini benar karena width: 100%;didefinisikan tabledalam Bootstrap CSS dan begitu juga menggantikan width: auto;aturan Anda .

— Ollie Bennett

Tidak benar-benar jawaban, lebih baik mengedit jawaban yang diterima saat ini yang dibaca oleh sebagian besar orang (saya edit sekarang) .

— Iulian Onofrei