602

簡単なスキーム:

  <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>はそのままです。

4

23 に答える 23

157

私は同じ問題を抱えていました。テーブルを修正してから、td 幅を指定しました。th がある場合は、それらも実行できます。

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

テンプレート：

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

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

于 2013-09-30T20:29:12.880 に答える
80

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

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

デモはこちら

于 2015-01-30T03:17:50.303 に答える
63

テーブルで使用<table class="table">している場合、Bootstrap のテーブル クラスはテーブルに 100% の幅を追加します。幅を自動に変更する必要があります。

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

于 2013-02-27T15:08:52.930 に答える
51

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>
      ...
于 2018-06-07T10:23:15.493 に答える
12

これを試して -

<style>
 table { table-layout: fixed; }
 table th, table td { overflow: hidden; }
</style>
于 2014-07-30T06:24:17.967 に答える
8

Bootstrap 4 および 5 には、html 要素の幅をサイズ変更する幅ユーティリティがあります。例:

<tr class="w-50">
    <td class="w-25">A</td>
    ...
</tr>
于 2021-03-05T03:04:04.777 に答える
3

わかりました、問題がどこにあるのかを突き止めました-Bootstrapは要素のデフォルト値として設定されているため、解決策は次のとおりですwidth。select

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

それ以外はうまくいきません。

于 2013-02-27T15:06:04.460 に答える
2

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

したがって、常にメイン コンテナ (tableまたは などtd) を確認しますが、美しいコードをどこか深い場所でキャンセルしていないかどうかも常に確認してください :)

于 2016-12-21T11:39:34.623 に答える
2

テーブルで固定テーブル レイアウト css を使用し、td の割合を設定します。

于 2020-08-05T05:33:53.887 に答える
2

ページの HTML のコンテキストや CSS の残りの部分がないと判断するのは困難です。CSS ルールが td 要素に影響を与えない理由は無数にあるかもしれません。

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

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

これにより、CSS がブートストラップ CSS のより具体的なルールによってオーバーライドされるのを回避できます。

(ちなみに、style 属性を使用したインライン CSS サンプルでは、​​幅のつづりを間違えています。これが、試行が失敗した理由を説明している可能性があります!)

于 2013-02-27T14:56:54.360 に答える