Bagaimana cara mengatur lebar tetap untuk <td>?


514

Skema sederhana:

  <tr class="something">
    <td>A</td>
    <td>B</td>
    <td>C</td>
    <td>D</td>
  </tr>

Saya perlu mengatur lebar tetap untuk <td>. Saya sudah mencoba:

tr.something {
  td {
    width: 90px;
  }
}

Juga

td.something {
  width: 90px;
}

untuk

<td class="something">B</td>

Dan bahkan

<td style="width: 90px;">B</td>

Namun lebarnya <td>masih sama.


1
Saya baru saja mencoba dan berhasil - mungkin masalahnya ada di tempat yang berbeda. Apa yang Firebug katakan tentang elemen?
Rockbot

Di situs ini , manusia menceritakan tentang topik ini dengan video. Sangat jelas.
egemen

gunakan style="width: 1% !important;"untuk membuat lebar sama ketatnya dengan kata terpanjang dalam kolom, ini berguna untuk kolom ID / # pertama. Diuji dalam chrome (desktop & mobile), opera (desktop), IE (desktop), edge (desktop), firefox (desktop)
vinsa

Jawaban:


1085

Untuk Bootstrap 4.0:

Di Bootstrap 4.0.0 Anda tidak dapat menggunakan col-*kelas dengan andal (berfungsi di Firefox, tetapi tidak di Chrome). Anda perlu menggunakan jawaban OhadR :

<tr>
  <th style="width: 16.66%">Col 1</th>
  <th style="width: 25%">Col 2</th>
  <th style="width: 50%">Col 4</th>
  <th style="width:  8.33%">Col 5</th>
</tr>

Untuk Bootstrap 3.0:

Dengan twitter bootstrap 3 gunakan: di class="col-md-*"mana * adalah sejumlah kolom lebar.

<tr class="something">
    <td class="col-md-2">A</td>
    <td class="col-md-3">B</td>
    <td class="col-md-6">C</td>
    <td class="col-md-1">D</td>
</tr>

Untuk Bootstrap 2.0:

Dengan penggunaan twitter bootstrap 2: di class="span*"mana * adalah sejumlah kolom lebar.

<tr class="something">
    <td class="span2">A</td>
    <td class="span3">B</td>
    <td class="span6">C</td>
    <td class="span1">D</td>
</tr>

** Jika Anda memiliki <th>elemen atur lebar di sana dan bukan pada <td>elemen.


79
Apa yang terjadi jika Anda memiliki lebih dari 12 kolom?
ClearCloud8

33
Anda dapat menerapkan ini hanya di <head> di setiap tag <th> dan semua baris akan cocok
Diego Fernando Murillo Valenci

7
Apakah ada dokumentasi tentang ini di situs web Bootstrap?
Luis Perez

26
Ini berfungsi, tetapi tidak ada di situs bootstrap karena kelas col-* tidak dimaksudkan untuk digunakan dengan cara ini. Mereka dimaksudkan untuk digunakan dalam grid bootstrap responsif. Jika Anda suka apa yang dilakukan ini, pertimbangkan untuk melihat CSS untuk mereka dan salin untuk membuat CSS Anda sendiri.
DustinA

1
Selain itu, alih-alih mengatur kelas untuk baris jangkauan, kita cukup mengaturnya sekali untuk tajuk <th> dan sisanya ditangani secara otomatis!
dopplesoldner

133

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

table {
    table-layout: fixed;
    word-wrap: break-word;
}

Templat:

<td style="width:10%">content</td>

Silakan gunakan CSS untuk menyusun tata letak.



Ini bagus, tetapi sebagai tambahan gunakan classdalam tdtag alih-alih menerapkan gaya secara langsung
Ramses

1
Ini berfungsi lebih baik cukup hanya untuk meningkatkan lebar thseperti: <th style="width: 25%;"></th>ini akan mempengaruhi lebar kolom lainnya
shaijut

Terima kasih! Saya telah menetapkan kelas col-md-x untuk Bootstrap 3 tetapi tidak berhasil. Mengatur tata letak tabel untuk "diperbaiki" menyelesaikan masalah saya.
maurisrx

Ini bekerja. Kuncinya adalah table-layout: fixed. Itu diperlukan karena banyak templat yang dibangun dengan BS4 menerapkan flex untuk semuanya, termasuk tabel.
Ivan

73

Alih-alih menerapkan col-md-*kelas untuk masing-masing tddi baris, Anda dapat membuat colgroupdan menerapkan kelas ke coltag.

    <table class="table table-striped">
        <colgroup>
            <col class="col-md-4">
            <col class="col-md-7">
        </colgroup>
        <tbody>
        <tr>
            <td>Title</td>
            <td>Long Value</td>
        </tr>
        </tbody>
    </table>

Demo di sini


1
Saya lebih suka ini tetapi tampaknya tidak mempengaruhi kasus saya, lebar kolom tidak diperpanjang oleh col-md- *
Osify

Saya suka solusi ini, ngomong-ngomong, mengapa seseorang terpaksa menggunakan kelas col-md- * dan bukan col-lg- *, col-sm- * atau col-xs- *?
LucioB

1
@LucioB Anda dapat menggunakan mana saja yang Anda inginkan dan bahkan menggunakan beberapa di antaranya dengan kolom (misalnya <col class="col-md-4 col-sm-6">akan memiliki lebar 33% dalam ukuran layar sedang dan 50% dalam ukuran layar kecil)
VDarricau

1
Colgroup tidak berfungsi di Chrome. (Bootstrap v4.1). Untuk keseragaman di seluruh browser, gunakan% width untuk elemen <td>.
AnkitK

57

Semoga yang satu ini akan membantu seseorang:

<table class="table">
  <thead>
    <tr>
      <th style="width: 30%">Col 1</th>
      <th style="width: 20%">Col 2</th>
      <th style="width: 10%">Col 3</th>
      <th style="width: 30%">Col 4</th>
      <th style="width: 10%">Col 5</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>Val 1</td>
      <td>Val 2</td>
      <td>Val 3</td>
      <td>Val 4</td>
      <td>Val 5</td>
    </tr>
  </tbody>
</table>

https://github.com/twbs/bootstrap/issues/863


1
Jawaban termudah untuk digunakan
GavinBelson

54

Jika Anda menggunakan <table class="table">di meja Anda, kelas tabel Bootstrap menambahkan lebar 100% ke tabel. Anda perlu mengubah lebar menjadi otomatis.

Juga, jika baris pertama tabel Anda adalah baris tajuk, Anda mungkin perlu menambahkan lebar ke th daripada td.


1
Sebagai tambahan pada Bootstrap 3 Anda juga perlu mengatur properti white-space thmenjadi normal karena sekarangrap saat ini karena header tersebut tidak akan rusak.
Sammaye

41

Dalam kasus saya, saya dapat memperbaiki masalah itu dengan menggunakan min-width: 100pxbukan width: 100pxuntuk sel thatau td.

.table td, .table th {
    min-width: 100px;
}

13
Ini mungkin mempertahankan apa yang tersisa dari kewarasan saya.
Joel

Iya! set ini, well, lebar minimum untuk kolom dalam tabel responsif. Terima kasih.
O. Jones

1
ini bekerja lebih baik daripada pertanyaan yang dijawab, terima kasih!
israel

38

Untuk Bootstrap 4, Anda cukup menggunakan pembantu kelas:

<table class="table">
  <thead>
    <tr>
      <td class="w-25">Col 1</td>
      <td class="w-25">Col 2</td>
      <td class="w-25">Col 3</td>
      <td class="w-25">Col 4</td>
    </tr>
  </thead>
  <tbody>
    <tr>
      ...

5
Ini cocok untuk kasus penggunaan saya. Terima kasih!
tonny

16
Penting untuk dicatat bahwa satu-satunya opsi w- * adalah: .w-25, .w-50, .w-75, .w-100, .w-autojadi jika Anda menginginkan sesuatu yang lain, katakanlah, w-10Anda perlu menambahkan .w-10 { width: 10% !important; }ke file css lokal Anda.
Abela

10

Coba ini -

<style>
 table { table-layout: fixed; }
 table th, table td { overflow: hidden; }
</style>

3
Ini adalah satu-satunya yang berhasil dari semua jawaban lainnya.
0bserver07

Saya juga menambahkan text-overflow: ellipsisuntuk memastikan teks cut-off terlihat jelas
weeksdev

@ Observer07 Memang
TheRandomGuy

9

Bootstrap 4.0

Pada Bootstrap 4.0, kita harus mendeklarasikan baris tabel sebagai flex-box dengan menambahkan kelas d-flex, dan juga drop xs, md, sufiks untuk memungkinkan Bootstrap untuk secara otomatis menurunkannya dari viewport.

Jadi akan terlihat sebagai berikut:

<table class="table">
    <thead>
        <tr class="d-flex">
            <th class="col-2"> Student No. </th>
            <th class="col-7"> Description </th>
            <th class="col-3"> Amount </th>
        </tr>
    </thead>

    <tbody>
        <tr class="d-flex">
            <td class="col-2">test</td>
            <td class="col-7">Name here</td>
            <td class="col-3">Amount Here </td>
        </tr>
</table>

Semoga ini bisa membantu orang lain di luar sana!

Bersulang!


7

Solusi gabungan ini bekerja untuk saya, saya ingin kolom dengan lebar sama

<style type="text/css">

    table {
        table-layout: fixed;
        word-wrap: break-word;
    }

        table th, table td {
            overflow: hidden;
        }

</style>

Hasil: -

masukkan deskripsi gambar di sini


3

Ok, saya baru tahu di mana masalahnya - di Bootstrap diatur sebagai nilai default widthuntuk selectelemen, dengan demikian, solusinya adalah:

tr. something {
  td {
    select {
      width: 90px;
    }
  }
}

Ada lagi yang tidak berhasil bagi saya.


2

Sulit untuk menilai tanpa konteks halaman html atau sisa CSS Anda. Mungkin ada jutaan alasan mengapa aturan CSS Anda tidak memengaruhi elemen td.

Sudahkah Anda mencoba penyeleksi CSS yang lebih spesifik seperti

tr.somethingontrlevel td.something {
  width: 90px;
}

Ini untuk menghindari CSS Anda ditimpa oleh aturan yang lebih spesifik dari bootstrap css.

(Omong-omong, dalam sampel css inline Anda dengan atribut style, Anda salah mengeja lebar - yang bisa menjelaskan mengapa percobaan itu gagal!)


2

Saya telah berjuang dengan masalah ini untuk sementara waktu, jadi kalau-kalau seseorang membuat kesalahan bodoh yang sama dengan saya ... Di dalam <td>saya ada elemen dengan white-space:pregaya diterapkan. Itu membuat semua trik tabel / tr / td saya dibuang. Ketika saya menghapus gaya itu, tiba-tiba semua teks saya diformat dengan baik di dalamtd .

Jadi, selalu periksa wadah utama (suka tableatau td) tetapi juga, selalu periksa apakah Anda tidak membatalkan kode beautifull Anda di tempat yang lebih dalam :)


1

Gunakan d-flex sebagai ganti baris untuk "tr" di Bootstrap 4

Masalahnya adalah bahwa "baris" kelas lebih lebar dari wadah induk, yang memperkenalkan masalah.

<table class="table">
  <tbody>
    <tr class="d-flex">
      <td class="col-sm-8">Hello</td>
      <td class="col-sm-4">World</td>
    </tr>
    <tr class="d-flex">
      <td class="col-sm-8">8 columns</td>
      <td class="col-sm-4">4 columns</td>
    </tr>
  </tbody>
</table>


Maksud saya "baris" bukan "tr". Karena kelas baris dilengkapi dengan talang di kedua ujungnya. Atau jika Anda tidak ingin menggunakan kelas "baris" cukup tambahkan kelas "tanpa talang".
Usman Anwar

1

Di bootstarp 4 Anda dapat menggunakan rowdan col-*dalam tabel, saya menggunakannya seperti di bawah ini

<table class="table">
    <thead>
        <tr class="row">
            <th class="col-sm-3">3 row</th>
            <th class="col-sm-4">4 row</th>
            <th class="col-sm-5">5 row</th>
        </tr>
    </thead>
    <tbody>
        <tr class="row">
            <td class="col-sm-3">some text</td>
            <td class="col-sm-4">some text</td>
            <td class="col-sm-5">some text</td>
        </tr>
    </tbody>
</table>

1

Inilah yang sering saya lakukan ketika saya tidak harus berurusan dengan IE

    <tr>
      <th scope="col" style="width: calc(1 * 100% / 12)">#</th>
      <th scope="col" style="width: calc(4 * 100% / 12)">Website</th>
      <th scope="col" style="width: calc(3 * 100% / 12)">Username</th>
      <th scope="col" style="width: calc(3 * 100% / 12)">Password</th>
      <th scope="col" style="width: calc(1 * 100% / 12)">Action</th>
    </tr>

Dengan begitu Anda bisa memiliki kisi 12-col yang sudah biasa.


0

Tak satu pun dari ini bekerja untuk saya, dan memiliki banyak cols pada datatable untuk membuat% atau sm class sama dengan 12 elemen layout pada bootstrap.

Saya bekerja dengan datatables Angular 5 dan Bootstrap 4, dan memiliki banyak cols dalam tabel. Solusi bagi saya adalah THmenambahkan DIVelemen dengan lebar tertentu. Sebagai contoh untuk cols "Nama Person" dan "Tanggal acara" Saya membutuhkan lebar tertentu, kemudian meletakkan divdi header col, seluruh lebar col kemudian mengubah ukuran menjadi lebar yang ditentukan dari div pada TH:

<table datatable [dtOptions]="dtOptions" *ngIf="listData" class="table table-hover table-sm table-bordered text-center display" width="100%">
    <thead class="thead-dark">
        <tr>
            <th scope="col">ID </th>
            <th scope="col">Value</th>
            <th scope="col"><div style="width: 600px;">Person Name</div></th>
            <th scope="col"><div style="width: 800px;">Event date</div></th> ...

-1

gunakan. sesuatu tanpa td atau th

<!DOCTYPE html>
<html lang="en">
<head>
  <title>Bootstrap Example</title> 
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">  
  <style>
    .something {
      width: 90px;
      background: red;
    }
  </style>
</head>
<body>

<div class="container">
  <h2>Fixed width column</h2>            
  <table class="table table-bordered">
    <thead>
      <tr>
        <th class="something">Firstname</th>
        <th>Lastname</th>
        <th>Email</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <td>John</td>
        <td>Doe</td>
        <td>john@example.com</td>
      </tr>
      <tr>
        <td>Mary</td>
        <td>Moe</td>
        <td>mary@example.com</td>
      </tr>
      <tr>
        <td>July</td>
        <td>Dooley</td>
        <td>july@example.com</td>
      </tr>
    </tbody>
  </table>
</div>

</body>
</html>


-2

<div class="row" id="divcashgap" style="display:none">
                <div class="col-md-12">
                    <div class="table-responsive">
                        <table class="table table-default" id="gvcashgapp">
                            <thead>
                                <tr>
                                    <th class="1">BranchCode</th>
                                    <th class="2"><a>TC</a></th>
                                    <th class="3">VourNo</th>
                                    <th class="4"  style="min-width:120px;">VourDate</th>
                                    <th class="5" style="min-width:120px;">RCPT Date</th>
                                    <th class="6">RCPT No</th>
                                    <th class="7"><a>PIS No</a></th>
                                    <th class="8" style="min-width:160px;">RCPT Ammount</th>
                                    <th class="9">Agging</th>
                                    <th class="10" style="min-width:160px;">DesPosition Days</th>
                                    <th class="11" style="min-width:150px;">Bank Credit Date</th>
                                    <th class="12">Comments</th>
                                    <th class="13" style="min-width:150px;">BAC Comment</th>
                                    <th class="14">BAC Ramark</th>
                                    <th class="15" style="min-width:150px;">RAC Comment</th>
                                    <th class="16">RAC Ramark</th>
                                    <th class="17" style="min-width:120px;">Update Status</th>
                                </tr>
                            </thead>
                            <tbody id="tbdCashGapp"></tbody>
                        </table>
                    </div>
                </div>
            </div>


Tambahkan beberapa penjelasan juga.
Akash Dubey

Jawaban ini paling membingungkan. Kelasnya aneh, id tidak penting, tidak ada penjelasan.
GotBatteries
Dengan menggunakan situs kami, Anda mengakui telah membaca dan memahami Kebijakan Cookie dan Kebijakan Privasi kami.
Licensed under cc by-sa 3.0 with attribution required.