CSSで表の境界線を単線の境界線に設定するにはどうすればよいですか? (詳しいコード説明)

テーブルの枠線を単一線の枠線に設定するにはどうすればよいですか?この記事では表の枠線を一本線の枠線に設定するCSSの方法を紹介します。困っている友人は参考にしていただければ幸いです。

まず、表に枠線を追加した後のデフォルトの効果を見てみましょう:

table,table  td{
	border: 1px solid #000;
}
table  td{
	padding: 10px 30px;
}

表が二重線になっていることがわかります。フォーム内に表示されるのですが、HTMLページ上に表フォームを一行枠で表示するにはどうすればよいでしょうか？以下では、簡単なコード例を使用して、表に単線の境界線を設定する方法を説明します。

CSS で単一行の境界線を設定する方法の紹介:

まず、HTML ページにテーブル table を作成する必要があります。コードは次のとおりです。

<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 を使用してテーブルに単一行の境界線を追加する方法を見てみましょう。

1. まず、表全体の外枠に左枠と上枠を追加します。

table {
width: 200px;
border-top: 1px solid #999;
border-left: 1px solid #999;
}

2 table セルに下枠線と右枠線を追加します

table td {
	padding: 10px 30px;
	border-bottom: 1px solid #999;
	border-right: 1px solid #999;
}

3. セルの隙間を削除します

table {
	width: 200px;
	border-top: 1px solid #999;
	border-left: 1px solid #999;
	border-spacing: 0;/*去掉单元格间隙*/
}

説明:

border-spacing 属性: 隣接するセルの境界線間の距離を設定できます (境界線分離モードのみ)。

border-spacing: 0; と設定すると、テーブル内の隣接する各セルの境界線間の距離 (水平方向と垂直方向) が 0 になることを意味します。

レンダリング:

まとめ: 以上がこの記事で紹介するcssテーブル表の単線ボーダーの実装方法でした。学習は誰にとっても役立ちます。関連チュートリアルの詳細については、 CSS の基本ビデオ チュートリアル 、 HTML ビデオ チュートリアル 、bootstrap ビデオ チュートリアル を参照してください。

以上がCSSで表の境界線を単線の境界線に設定するにはどうすればよいですか? (詳しいコード説明)の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。