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.

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.

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.

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

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

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.

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

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

Coba ini -

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

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!

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

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.

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

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

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>

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>

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.

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

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>[email protected]</td>
      </tr>
      <tr>
        <td>Mary</td>
        <td>Moe</td>
        <td>[email protected]</td>
      </tr>
      <tr>
        <td>July</td>
        <td>Dooley</td>
        <td>[email protected]</td>
      </tr>
    </tbody>
  </table>
</div>

</body>
</html>