1. ホーム
  2. css

[解決済み] <td>に固定幅を設定するには?

2022-03-16 01:35:32

質問

シンプルな仕組みです。

  <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 bootstrap 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 bootstrap 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> 要素を使用します。