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

Jawaban:

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
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