Cara mengatur lebar tetap untuk <td>?

Skema sederhana:

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

Saya perlu untuk mengatur lebar tetap untuk <td>. I've 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>

Tapi lebar <td> masih sama.

TylerH
Pertanyaan edit 3 Januari 2019 в 8:05
Pemrograman
css html-table twitter-bootstrap width
27 Februari 2013 в 2:50
19 tayangan
Mengomentari pertanyaan (2)
Larutan

Untuk Bootstrap 4.0:

Di Bootstrap 4.0.0 anda tidak dapat menggunakan col-* kelas andal (bekerja di Firefox, tapi tidak di Chrome). Anda perlu menggunakan OhadR's jawaban:

<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 menggunakan: class="col-md-*" mana * adalah jumlah 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 twitter bootstrap 2 menggunakan: class="span*" mana * adalah jumlah 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> unsur-unsur mengatur lebar ada dan bukan pada <td> elemen.

MaPePeR
Jawaban edit 23 Februari 2018 в 11:26
Komentar (10)

Saya sedang mengalami masalah yang sama, saya membuat tabel tetap dan kemudian ditentukan saya td width. Jika anda memiliki th yang dapat anda lakukan mereka juga.

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

Template:

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

Silakan gunakan CSS untuk mengatur layout.

Hunter Medney
Jawaban edit 25 Juni 2015 в 10:32
Komentar (4)

Alih-alih menerapkan col-md-* kelas untuk masing-masing td di baris anda dapat membuat colgroup dan menerapkan di kelas untuk col tag.

    <table class="table table-striped">




        <tbody>
        <tr>
            <td>Title</td>
            <td>Long Value</td>
        </tr>
        </tbody>
    </table>

Demo di sini

Komentar (4)

Jika anda're menggunakan <table class="table"> di meja anda, Bootstrap's tabel kelas menambah lebar dari 100% ke meja. Anda perlu untuk mengubah lebar untuk auto.

Juga, jika baris pertama dari tabel header baris, anda mungkin perlu menambahkan lebar untuk th daripada td.

Komentar (1)

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

Murat Ozgul
Jawaban edit 4 April 2016 в 10:19
Komentar (0)

Dalam kasus saya, saya mampu untuk memperbaiki masalah itu dengan menggunakan min-width: 100px bukan width: 100px untuk sel-sel th atau td.

.table td, .table th {
    min-width: 100px;
}
ThiagoPXP
Jawaban edit 16 Oktober 2015 в 6:24
Komentar (6)

Untuk Bootstrap 4, anda hanya dapat menggunakan class helper:

<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>
      ...
Komentar (3)

Coba ini -


 table { table-layout: fixed; }
 table th, table td { overflow: hidden; }
Komentar (3)

Ini solusi gabungan bekerja untuk saya, saya ingin sama dengan lebar kolom



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

        table th, table td {
            overflow: hidden;
        }

Hasil :-

Komentar (0)

Bootstrap 4.0

Pada Bootstrap 4.0, kita harus menyatakan baris tabel sebagai flex-kotak dengan menambahkan kelas d-flex, dan juga drop xs, md, akhiran untuk memungkinkan Bootstrap untuk secara otomatis berasal dari viewport.

Sehingga 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 akan bermanfaat untuk orang lain di luar sana!

Cheers!

Komentar (0)

Ok, saya tahu di mana masalah - dalam Bootstrap diatur sebagai default value lebar untuk memilih elemen, dengan demikian, solusinya adalah:

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

Hal lain yang doesn't bekerja saya.

Komentar (0)

Sulit untuk menilai tanpa konteks dari halaman html atau sisa CSS anda. Mungkin ada banyak alasan mengapa anda CSS aturan ini tidak mempengaruhi td elemen.

Apakah anda mencoba lebih spesifik CSS seperti

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

Ini untuk menghindari CSS anda sedang diganti oleh yang lebih spesifik aturan dari bootstrap css.

(by the way, di inline css sampel dengan atribut style, anda salah eja lebar - yang bisa menjelaskan mengapa yang mencoba gagal!)

Komentar (0)

I've telah berjuang dengan masalah ini untuk sementara waktu, jadi hanya dalam kasus ketika seseorang membuat beberapa kesalahan bodoh seperti saya... Dalam <td> saya memiliki elemen dengan white-space:pre gaya diterapkan. Yang membuat semua meja saya/tr/td trik dibuang. Ketika saya dihapus gaya itu, tiba-tiba semua teks yang telah diformat dalam td.

Jadi, selalu memeriksa wadah utama (seperti meja atau td), tetapi juga, selalu periksa jika anda don't membatalkan beautifull kode di tempat yang lebih dalam :)

Komentar (0)

Menggunakan d-flex bukannya turut untuk "tr" di Bootstrap 4

Masalahnya adalah bahwa "baris" kelas memakan waktu lebih lebar maka wadah induk, yang memperkenalkan isu-isu.

<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>
Komentar (0)

menggunakan .sesuatu tanpa td atau th




  Bootstrap Example 


    .something {
      width: 90px;
      background: red;
    }




<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>
Komentar (0)

Ini tidak bekerja untuk saya, dan telah banyak cols pada datatable untuk membuat % atau sm kelas sama dengan 12 unsur-unsur tata letak pada bootstrap.

Saya bekerja dengan datatables Sudut 5 dan Bootstrap 4, dan memiliki banyak cols di meja. Solusi untuk saya berada di TH untuk menambahkan DIV elemen dengan lebar tertentu. Misalnya untuk cols "Orang Nama" dan "tanggal Acara" saya perlu lebar tertentu, kemudian menempatkan div di col header, seluruh col width kemudian mengubah ukuran dengan 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> ...
Stephen Rauch
Jawaban edit 5 September 2018 в 3:08
Komentar (0)

Di bootstarp 4 anda dapat menggunakan baris dan col-* di meja, saya gunakan 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>
Liam
Jawaban edit 13 November 2019 в 2:07
Komentar (0)
<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>
Komentar (2)