単純なスキーム：

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

の固定幅を設定する必要があり<td>ます。私はもう試した：

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

また

td.something {
  width: 90px;
}

ために

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

そして、

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

ただし、幅は<td>同じです。

Bootstrap 4.0の場合：

Bootstrap 4.0.0では、col-*クラスを確実に使用できません（Firefoxでは機能しますが、Chromeでは機能しません）。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>

Bootstrap 3.0の場合：

Twitterブートストラップ3を使用する場合：class="col-md-*"*は幅の列数です。

<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の場合：

Twitterブートストラップ2を使用する場合：class="span*"*は幅の列数です。

<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>要素がある場合は、<td>要素ではなく、そこで幅を設定します。

私は同じ問題を抱えていました、私はテーブルを修正してから私のtd幅を指定しました。あなたが持っているなら、あなたもそれらを行うことができます。

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

テンプレート：

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

レイアウトの構成にはCSSを使用してください。

col-md-*クラスをtd行のそれぞれに適用する代わりに、クラスを作成colgroupしてcolタグに適用できます。

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

デモはこちら

うまくいけば、これは誰かを助けるでしょう：

<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">テーブルで使用している場合、Bootstrapのテーブルクラスはテーブルに100％の幅を追加します。幅を自動に変更する必要があります。

また、テーブルの最初の行がヘッダー行である場合、幅をtdではなくthに追加する必要がある場合があります。

私の場合、セルまたはのmin-width: 100px代わりにwidth: 100pxを使用してその問題を修正することができました。thtd

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

Bootstrap 4の場合は、クラスヘルパーを使用するだけです。

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

これを試して -

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

ブートストラップ4.0

Bootstrap 4.0では、クラスd-flexを追加してテーブル行をフレックスボックスとして宣言する必要があります。また、Bootstrapがビューポートから自動的に派生できるように、xs、md、サフィックスをドロップする必要があります。

したがって、次のようになります。

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

これが他の誰かに役立つことを願っています！

乾杯！

この組み合わせのソリューションは私のために働きました、私は同じ幅の列が欲しかったです

<style type="text/css">

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

        table th, table td {
            overflow: hidden;
        }

</style>

結果：-

問題があった場所[OK]を、私はちょうど考え出した-ブートストラップにデフォルト値として設定されるwidthためselectの要素、したがって、解決策は以下のとおりです。

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

他には何もうまくいきません。

ページhtmlのコンテキストやCSSの残りの部分がないと判断が難しい。CSSルールがtd要素に影響を与えない理由はたくさんあります。

次のようなより具体的なCSSセレクターを試しましたか？

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

これは、ブートストラップcssからのより具体的なルールによってCSSが上書きされるのを防ぐためです。

（ちなみに、style属性を使用したインラインcssサンプルでは、​​幅のスペルを間違えています。これが、失敗した理由を説明している可能性があります。）

私はしばらくの間この問題に取り組んできました。そのため、誰かが私と同じ愚かな間違いをした場合に備えて... スタイル<td>の要素をwhite-space:pre適用しました。これにより、私のtable / tr / tdトリックはすべて破棄されました。そのスタイルを削除すると、突然、すべてのテキストが内で適切にフォーマットされましたtd。

したがって、常にメインコンテナ（tableまたはのようなtd）をチェックしますが、美しいコードをより深いところにキャンセルしないかどうかも常にチェックします:)

Bootstrap 4で「tr」に行の代わりにd-flexを使用する

問題は、「行」クラスは親コンテナよりも幅が広く、問題が発生することです。

<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で使用することができますrowし、col-*テーブルに、私は以下のようにそれを使用します

<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を扱う必要がないときによく行うことです

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

そうすれば、おなじみの12列グリッドを作成できます。

これは私にはうまくいきませんし、データテーブルに多くのcolsがあり、％またはsmクラスをブートストラップの12要素のレイアウトに等しくします。

私はデータテーブルAngular 5とBootstrap 4で作業しており、テーブルに多くのcolsがあります。私のための解決策は、特定の幅の要素THを追加することDIVでした。たとえば、cols "Person Name"と "Event date"の場合、特定の幅が必要です。次にdiv、colヘッダーにa を入れます。その後、colの幅全体が、divから指定された幅にサイズ変更されます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またはthなしで.somethingを使用する

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