web-dev-qa-db-ja.com

<td>に固定幅を設定するにはどうすればいいですか？

簡単なスキーム：

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

for

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

そしてさらに

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

しかし<td>の幅はまだ同じです。

csstwitter-bootstrapwidthhtml-table
437
user984621

ブートストラップ4.0の場合：

Bootstrap 4.0.0では、col-*クラスを確実に使用することはできません（Firefoxでは機能しますが、Chromeでは機能しません）。 OhadR's answer ：を使用する必要があります。

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

ブートストラップ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>

ブートストラップ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>要素ではなく幅を設定します。

902
Paulo

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

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

テンプレート：

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

レイアウトを構成するためにCSSを使用してください。

107
DDDD

行内の各tdにcol-md-*クラスを適用する代わりに、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>

デモ ここ

67
stormwild

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

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

53
meobyte

うまくいけば、これは誰かに役立つでしょう：

<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

37
OhadR

私の場合は、セルthまたはtdにmin-width: 100pxの代わりにwidth: 100pxを使用することで、この問題を解決できました。

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

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

これを試して -

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

この組み合わせた解決策は私のために働きました

<style type="text/css">

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

        table th, table td {
            overflow: hidden;
        }

</style>

結果： -

enter image description here

7
Hitesh Sahu

ブートストラップ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>

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

乾杯！

4
Randika Vishman

さて、私はちょうど問題がどこにあるのかを考え出しました - Bootstrapではwidth要素のデフォルト値selectとして設定されているので、解決策は次のとおりです。

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

他に何もうまくいかない。

3
user984621

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

ですから、常にメインコンテナ（tableやtdなど）をチェックしてください。また、美しいコードをどこか深いところでキャンセルしていないかどうかを常にチェックしてください。

2
Mikk

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

次のようなより具体的なCSSセレクタを試したことがありますか

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

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

（ちなみに、style属性を指定したインラインCSSサンプルでは、​​幅のスペルを間違えました - それがなぜ失敗したのか説明できます。

2
David Heijl

.something なし td または 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>

0
gecko

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

0
user10861319

これはどれも私にとってはうまくいきませんし、ブートストラップ上で％やsmクラスを12要素のレイアウトにするためにdatatableに多くのcolsを持っています。

私はデータテーブルAngular 5とBootstrap 4を使って作業していましたが、テーブルには多くの列があります。私にとっての解決策は、特定の幅を持つTHname__要素を追加するDIVname__にありました。例えば、cols "Person Name"と "Event date"の場合、特定の幅が必要です。次に、colヘッダーにdivname__を入れます。それから、col幅全体がTHname__のdivから指定された幅にサイズ変更されます。 

<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> ...
0
Axel Osorio