CSSでborder-collapse属性を使用してテーブルの境界線を設定するにはどうすればよいですか? (コード例)

CSS で border-collapse 属性を使用してテーブルの境界線を設定するにはどうすればよいですか?この記事では、CSSのborder-collapse属性とは何なのかを紹介します。 border-collapse プロパティは、テーブルの境界線を設定します。困っている友人は参考にしていただければ幸いです。

まず、css を見てみましょう border-collapse 属性とは何ですか?それが何をするのか。

border-collapse 属性: テーブルの境界線を 1 つの境界線に結合するかどうかを設定します。つまり、テーブルの境界線を結合するか個別に表示するかを設定するために使用されます。

基本構文:

border-collapse : separate | collapse ;

Separate: デフォルト値。境界線は分離されます。つまり、二重線の境界線が表示されます。

collapse: 可能であれば、境界線は 1 つの線、つまり単一線の境界線に結合されます。

このことから、border-collapse 属性で 2 つのテーブルの境界線スタイル、つまり二重線と単線の境界線を設定できることもわかります。

簡単なコード例を通じて、テーブルの 2 つの境界線スタイルの実装を見てみましょう。

二重線のテーブル境界線の実装

html コード:

<table>
	<tr>
		<td>内容</td><td>内容</td><td>内容</td><td>内容</td><td>内容</td>
	</tr>
	<tr>
		<td>内容</td><td>内容</td><td>内容</td><td>内容</td><td>内容</td>
	</tr>
	<tr>
		<td>内容</td><td>内容</td><td>内容</td><td>内容</td><td>内容</td>
	</tr>
	<tr>
		<td>内容</td><td>内容</td><td>内容</td><td>内容</td><td>内容</td>
	</tr>
</table>

css コード:

table,table td{
    text-align: center;
	border: 1px solid #000;
	border-collapse：separate；
}
table  td{
	padding: 10px 30px;
}

レンダリング:

表の枠線は実際には非常に簡単で、表の外枠と表内の各セルの枠線を同時に設定するだけで実現できます。 Separate はデフォルト値であるため、border-collapse: Separate が設定されていない場合でも、テーブルには二重線の効果が表示されます。主に、境界線を結合するための border-collapse 属性を見て、単一行の境界線のメソッドを実現します。 HTML コードは同じで、CSS スタイルを設定するだけです。

css コード:

table,table tr td {
	border: 1px solid #000;
	text-align: center;
	border-collapse: collapse;
}
table tr td {
	padding: 10px 30px;
}

レンダリング:

単線の境界線の実装も、二重線に基づいています。 line style と border-collapse:collapse; を設定すると、テーブルの境界線が 1 つに結合され、隣接する 2 つの線が結合され、境界線が 1 本の線として表示されます。

要約: 表の境界線の単線境界線スタイルと二重線境界線スタイルはどちらもフロントエンド ページで広く使用されており、必要に応じて異なるスタイルを使用できることを願っています。あなたの学習に役立ちます。関連チュートリアルの詳細については、

CSS の基本ビデオ チュートリアル 、 HTML ビデオ チュートリアル 、bootstrap ビデオ チュートリアル を参照してください。

以上がCSSでborder-collapse属性を使用してテーブルの境界線を設定するにはどうすればよいですか? (コード例)の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。