ホームページ > 記事 > ウェブフロントエンド > CSSで表の境界線間の距離を設定するにはどうすればよいですか? border-spacing 属性の使用
CSSで表の境界線間の距離を設定するにはどうすればよいですか? border-spacing 属性の使用
- 青灯夜游オリジナル
- 2019-02-18 10:46:269107ブラウズ
CSS では、表の境界線が「分離」状態にある場合、border-spacing プロパティを使用して、隣接するセルの境界線間の距離を設定します。次の記事では、border-spacing 属性の使用方法を説明します。ご参考になれば幸いです。
#CSS border-spacing プロパティ
border-spacing プロパティは、テーブルの境界線を表示するときに使用されます。 "detached" の場合は、行とセルの境界線の水平方向と垂直方向の間隔を設定します。 [ビデオ チュートリアルの推奨:CSS チュートリアル ]
1 ～ 2 つの長さの値を持つことができます:
● 2 つの長さの値がすべての場合、最初の値は水平方向の間隔に作用し、2 番目の値は垂直方向の間隔に作用します。 ● 長さの値が 1 つだけ指定されている場合、この値は水平方向と垂直方向の間隔に作用します。説明: border-spacing 属性は、HTML タグの属性 cellspacing と同じ効果があります。
注: このプロパティは、テーブルの境界線が独立している場合 (つまり、border-collapse プロパティが分離するように設定されている場合) にのみ機能します。
CSS border-spacing プロパティの使用例
以下は、border-spacing プロパティがどのように設定するかを示す簡単なコード例です。 table border space Distance:例 1: border-collapse:collapse; を設定する場合:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<style>
table,
td,
th {
border: 1px solid black;
}
td,th{
padding: 5px 20px;
}
#table1 {
border-collapse: collapse;
border-spacing: 15px;
}
</style>
</head>
<body>
<h2>border-spacing: 15px:</h2>
<p>使用“border-collapse:collapse”时，border-spacing属性无效：</p>
<table id="table1">
<tr>
<th>姓名</th>
<th>年龄</th>
</tr>
<tr>
<td>Peter</td>
<td>20</td>
</tr>
<tr>
<td>Lois</td>
<td>20</td>
</tr>
</table>
</body>
</html>Rendering:
例 2:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<style>
table,
td,
th {
border: 1px solid black;
}
td,th{
padding: 5px 20px;
}
#table2 {
border-collapse: separate;
border-spacing: 15px;
}
#table3 {
border-collapse: separate;
border-spacing: 15px 30px;
}
</style>
</head>
<body>
<h2>border-spacing: 15px:</h2>
<p>使用“border collapse:separate”时，border spacing属性可用于设置单元格之间的间距：</p>
<table id="table2">
<tr>
<th>姓名</th>
<th>年龄</th>
</tr>
<tr>
<td>Peter</td>
<td>20</td>
</tr>
<tr>
<td>Lois</td>
<td>20</td>
</tr>
</table>
<h2>border-spacing: 15px 30px:</h2>
<p>使用两个length值（第一个值设置水平间距，第二个值设置垂直间距）：</p>
<table id="table3">
<tr>
<th>姓名</th>
<th>年龄</th>
</tr>
<tr>
<td>Peter</td>
<td>20</td>
</tr>
<tr>
<td>Lois</td>
<td>20</td>
</tr>
</table>
</body>
</html>レンダリング:
コードの説明:
境界線が独立している場合 (border-collapse 属性が分離に設定されている場合)、border-spacing は隣接するエッジが結合される場合 (border-collapse 属性が Collapse に設定されている場合) に有効になります。 border-spacing 属性が無効です。 以上がこの記事の全内容です、皆様の学習のお役に立てれば幸いです。さらにエキサイティングなコンテンツについては、PHP 中国語 Web サイトの関連チュートリアルのコラムに注目してください。 ！ ！以上がCSSで表の境界線間の距離を設定するにはどうすればよいですか? border-spacing 属性の使用の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。
声明：
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。