ホームページ > 記事 > ウェブフロントエンド > border-collapse属性の使い方
border-collapse属性の使い方
- 青灯夜游オリジナル
- 2019-02-16 09:56:306933ブラウズ
border-collapse 属性はテーブル要素に使用され、テーブルの 2 つの境界線を 1 つの境界線に結合するように設定できます。
#CSS border-collapse プロパティ
border-collapse プロパティは、テーブルの境界線を指定するかどうかを設定します。単一の境界線に結合されるか、標準の HTML のように分離されます。これには 2 つの値があります:
Separate: デフォルト値。各セルは独自の境界線を表示します。collapse : 可能な場合を指定すると、境界線が 1 つの境界線にマージされます (この時点では、border-spacing プロパティと empty-cells プロパティは効果がありません)。注: すべての主要なブラウザは、border-collapse 属性をサポートしています。
注: border-collapse 属性は、!DOCTYPE が指定されていない場合、予期しない影響を与える可能性があります。
CSS border-collapse 属性の使用例:
以下は、border-collapse 属性の使用方法を示す簡単なコード例です。属性:<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<style type = "text/css">
.box{
width: 400px;
margin: 100px auto;
}
table.one {border-collapse:collapse;}
table.two {border-collapse:separate;}
td.a {
border-style:dotted;
border-width:3px;
border-color:#000000;
padding:10px 50px;
}
td.b {
border-style:solid;
border-width:3px;
border-color:#333333;
padding:10px 50px;
}
</style>
</head>
<body>
<div class="box">
<table class = "one">
<caption>边框折叠示例</caption>
<tr><td class = "a">单元格A折叠示例</td></tr>
<tr><td class = "b">单元格B折叠示例</td></tr>
</table>
<br />
<table class = "two">
<caption>边框分隔示例</caption>
<tr><td class = "a">单元格A分隔示例</td></tr>
<tr><td class = "b">单元格B分隔示例</td></tr>
</table>
</div>
</body>
</html>レンダリング:
以上がborder-collapse属性の使い方の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。
声明：
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。