ブートストラップを使用して HTML テーブルの要素に固定幅を設定する方法

の幅を固定しますHTML

テーブル データ セルの固定幅の設定 () は、一般的なスタイル要件です。ただし、これを達成するのは難しい場合があり、さまざまなアプローチを試しても成功しなかったかもしれません。

Bootstrap 4.0

残念ながら、Bootstrap 4.0.0 では、次のことを使用できません。 Col-* クラス (Chrome ではなく Firefox でのみ動作するため)。代わりに、次の回避策を使用する必要があります。

<tr>
  <th>

Bootstrap 3.0

Bootstrap 3.0 では、「col-md-」を使用できます。クラス。ここで、「」は、指定する幅の列数を表します。 want.

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

Bootstrap 2.0 の場合は、Bootstrap 3.0 と同じパターンに従って「span*」クラスを使用します。

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

重要注

をお持ちの場合は、テーブル内の要素では、必ず 番目の要素の幅を設定してください。 要素ではなく要素要素。これはだからです。要素はその親 から幅を継承します。要素。

以上がブートストラップを使用して HTML テーブルの要素に固定幅を設定する方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。