Basit şema:

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

İçin sabit bir genişlik ayarlamam gerekiyor <td>. Denedim:

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

Ayrıca

td.something {
  width: 90px;
}

için

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

Ve hatta

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

Ancak genişliği <td>hala aynı.

Bootstrap 4.0 için:

Bootstrap 4.0.0'da col-*sınıfları güvenilir bir şekilde kullanamazsınız (Firefox'ta çalışır, ancak Chrome'da çalışmaz). OhadR'ın cevabını kullanmanız gerekir :

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

Bootstrap 3.0 için:

Twitter bootstrap 3 ile: class="col-md-*"burada *, bir dizi genişlik sütunudur.

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

Bootstrap 2.0 için:

Twitter bootstrap 2 ile: class="span*"burada *, bir dizi genişlik sütunudur.

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

** <th>Elemanlarınız varsa , orada genişliği ayarladınız <td>.

Aynı sorunu yaşıyordum, tabloyu düzelttim ve td genişliğimi belirttim. Eğer inci varsa bunları da yapabilirsiniz.

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

Şablon:

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

Herhangi bir düzeni yapılandırmak için lütfen CSS kullanın.

col-md-*Sınıfları tdsatırdaki her birine uygulamak yerine a oluşturabilir colgroupve sınıfları coletikete uygulayabilirsiniz .

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

Burada demo

Umarım bu birine yardım eder:

<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

<table class="table">Masanızda kullanıyorsanız , Bootstrap'ın tablo sınıfı tabloya% 100 genişlik ekler. Genişliği otomatik olarak değiştirmeniz gerekir.

Ayrıca, tablonuzun ilk satırı bir başlık satırı ise, genişliği td yerine th'ye eklemeniz gerekebilir.

Benim durumumda hücreleri min-width: 100pxyerine veya kullanarak bu sorunu giderebildim .width: 100pxthtd

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

Bootstrap 4 için sınıf yardımcısını kullanabilirsiniz:

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

Bunu dene -

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

Önyükleme 4.0

Bootstrap 4.0'da, sınıf d-flex ekleyerek tablo satırlarını flex-box olarak tanımlamamız ve ayrıca Bootstrap'in görünüm penceresinden otomatik olarak türetmesine izin vermek için xs, md, sonekleri bırakmamız gerekir.

Bu yüzden aşağıdaki görünecektir:

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

Bu başka birine yardımcı olacağını umuyoruz!

Şerefe!

Bu kombine çözüm benim için çalıştı, eşit genişlikte sütunlar istedim

<style type="text/css">

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

        table th, table td {
            overflow: hidden;
        }

</style>

Sonuç: -

Tamam, sadece sorunun nerede olduğunu anladım - Bootstrap öğesi widthiçin varsayılan bir değer olarak ayarlanır select, böylece çözüm:

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

Başka hiçbir şey işe yaramıyor.

Sayfanın bağlamı html veya CSS'nizin geri kalanı olmadan yargılamak zor. CSS kuralınızın td öğesini etkilememesinin milyonlarca nedeni olabilir.

Gibi daha spesifik CSS seçicileri denediniz mi?

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

Bu, CSS'nizin bootstrap css'den daha spesifik bir kural tarafından geçersiz kılınmasını önlemek için.

(bu arada, stil özniteliğine sahip satır içi css örneğinizde, genişliği yanlış yazdınız - bu denemenin neden başarısız olduğunu açıklayabilir!)

Bir süredir bu sorunla mücadele ediyorum, bu yüzden birinin benimle aynı aptal hatayı <td>yapması durumunda ... İçinde white-space:prestil uygulanmış eleman vardı . Bu benim tüm tablo / tr / td hileler atıldı yaptı. Bu stili kaldırdığımda, aniden tüm metinlerim güzel bir şekilde biçimlendirildi.td .

Yani, her zaman ana konteyneri ( tableveya gibi td) kontrol edin, aynı zamanda, güzel kodunuzu daha derin bir yerde iptal edip etmediğinizi her zaman kontrol edin :)

Bootstrap 4'te "tr" için satır yerine d-flex kullanın

Mesele şu ki, "row" sınıfı sorunları tanıtan üst konteynırdan daha fazla genişlik alıyor.

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

Bootstarp 4'te kullanabilirsiniz rowve col-*tabloda aşağıdaki gibi kullanıyorum

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

IE ile uğraşmak zorunda olmadığımda sık sık böyle yaparım

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

Bu şekilde tanıdık bir 12-col ızgarasına sahip olabilirsiniz.

Bunların hiçbiri benim için çalışmıyor ve% veya sm sınıfı yapmak için datatable üzerinde birçok sütun var, bootstrap'ta 12 öğenin düzenine eşit.

Datatables Angular 5 ve Bootstrap 4 ile çalışıyordum ve masada çok sayıda sütun var. Benim için çözüm, belirli bir genişliğe sahip bir eleman THeklemekti DIV. Örneğin "Kişi Adı" ve "Olay tarihi" sütunları için Belirli bir genişliğe ihtiyacım var, sonra divcol başlığına bir koy , tüm col genişliği daha sonra div üzerindeki belirtilen genişliğe göre yeniden boyutlandırılır 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> ...

td veya th olmadan .something kullanın

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