CSS テーブルの td 幅を修正するにはどうすればよいですか?

• HTMLの使用 幅 ' 属性
• 「」を使用する n番目の子() 「セレクター」
• 「」を使用する <列> ' 鬼ごっこ

方法 1: HTML の「width」属性を使用する

” 幅 ”はHTMLが提供する基本的な属性です。 HTML要素の幅または水平方向の長さを設定します。テーブルデータを修正するには、以下の手順で width 属性を使用します。

ステップ 1: テーブルを作成する
HTML ファイルでは、「」を使用します。 <中央> ” タグを使用して、その中の各要素を Web ページの中央に表示します。その中で、「」を使用してテーブルを構築します。 <テーブル> ”、” ' と ' ” タグを付けて、その中にデータを書き込みます。

ステップ 2: CSS プロパティを「table」要素に追加する
CSS でテーブル要素セレクターを使用し、「 国境 ” 1px の赤一色、” テキスト整列 ” はテキストを中央に揃えます。” 幅 」は、テーブル全体の幅を 80% に設定します。

ステップ 3: 「td」要素にプロパティを割り当てる
使用 ' た ” 要素セレクターを使用して、” ボーダーボトム ” 5px の赤一色、” パディング アイテムをより目立たせるために20pxの「」と「 幅 」を 30% に設定します。

ステップ 4: 「番目」の要素にプロパティを割り当てる
使用 ' 番目 ” の色を変更する要素セレクター ボーダーボトム 」を赤から海の緑に変更して、より良い視覚化を作成します。

出力は次のように表示されます。

上のスナップショットは、すべての列の幅がそれぞれ 30% に固定されていることを示しています。

方法 2: 「nth-child( )」セレクターを使用する

CSS の nth-child() プロパティは、固定幅のテーブルを作成するために使用されます。このプロパティは列番号を取得し、「 ' と ' <番目> 』タグ。たとえば、幅は「 修理済み 「列番号のみ」 1 ' と ' 3 ”。これらの各列の幅は 10% になります。この記事では、データ テーブルの幅を修正する方法を説明しました。

上記のコード ブロックの出力は次のとおりです。

この出力では、列番号 1 と 3 が 10% の幅に固定されていることを示しています。

方法 3: タグを使用する

「」の中 テーブル CSS部分の「」セクションに「」を追加します。 テーブルレイアウト: 固定 」プロパティを使用して、データテーブル要素の「幅」を設定します。

HTML ファイルに「」を追加します。 <列> 「」内のタグ <テーブル> ' セクション。たとえば、最初の列の幅を 15%、2 番目の列の幅を 30% に固定します。

上記のコード スニペットを実行すると、出力は次のようになります。

これにより、ユーザーはテーブル データの 要素の幅を固定できます。

結論

テーブルデータの幅を固定するには、「 幅 ' 属性、 ' n番目の子( ) 「区切り文字」と「 <列> 」タグメソッド。 ” 幅 」プロパティは固定幅を設定します。 「nth-child( )」セパレータは列番号をパラメータとして取得します。さらに、「 <列> ” タグを使用すると、テーブルを柔軟にしないことができます。この記事では、テーブル データの 要素の幅を修正する方法を説明しました。