- Border-Bottom をテーブル行
に追加するにはどうすればよいですか? - border-bottom を表の行
要素に設定します - スタイルテーブル要素
- スタイル「td」要素
- スタイル「tr」要素
Border-Bottom をテーブル行
に追加するにはどうすればよいですか? 表の行にボーダーボトムを追加すると、行全体にボーダーが追加され、視覚的なエクスペリエンスが向上し、ユーザーの注目を集めることができます。
テーブル行
に border-bottom を追加する詳細な例を以下に示します。
border-bottom をテーブル行に設定します
、 、 要素を使用して HTML ファイルに 3 行 3 列を含む単純なテーブルを作成します。
< テーブル >
< tr クラス = '行' >
< 番目 > 名前 < / 番目 >
< 番目 > スターテス < / 番目 >
< 番目 > 部屋番号 < / 番目 >
< / tr >
< tr クラス = '行' >
< た > ファカール < / た >
< た > 学生 < / た >
< た > 05 < / た >
< / tr >
< tr クラス = '行' >
< た > オマル < / た >
< た > 学生 < / た >
< た > 05 < / た >
< / tr >
< / テーブル >上記のコード スニペットでは、CSS で後からアクセスできるように、「row」クラスをテーブルの行
に割り当てています。
Web ページは次のようになります。
スタイルテーブル要素
CSS 部分で表要素を選択し、テキストを中央に配置します。その後、「」を使用します。 ボーダーコラプス ” プロパティを使用して、その値を折りたたみに設定します。
テーブル
{
境界崩壊: 崩壊;
テキスト整列: 中央;
}スタイル「td」要素
視覚的にわかりやすく表現するために、テーブル データ「
」要素とテーブル ヘッダー「 」要素に 20 ピクセルのパディングを与えてみましょう。 た
{
パディング:20ピクセル;
}
番目
{
パディング:20ピクセル;
}出力は次のようになります。
上記の出力では、20px のパディングが表示され、テキストが中央に配置されています。
スタイル「tr」要素
CSS ファイルで、「tr」セレクターの下に border-bottom プロパティを追加します。見出し行を含むテーブルのすべての行に割り当てます。たとえば、その値を 2px ソリッド ダークシアンに設定します。
tr {
border-bottom: 2px ソリッドダークシアン。
}上記のコード スニペットを実行すると、Web ページは次のようになります。
テーブルの各行の下部に枠線を追加する方法は以上です。
”。 結論
要素の下部に境界線を追加するには、CSS プロパティ border-collapse を折りたたみに設定し、「 」要素の border-bottom プロパティを使用します。これにより、CSS プロパティでテーブルに境界線を適用できるようになります。これにより、すべての「
」タグに簡単に border-bottom を追加できます。 - border-bottom を表の行