border-collapse属性の使い方-CSSチュートリアル-php.cn

border-collapse属性の使い方

青灯夜游

リリース： 2019-02-16 09:56:30

オリジナル

6983 人が閲覧しました

border-collapse 属性はテーブル要素に使用され、テーブルの 2 つの境界線を 1 つの境界線に結合するように設定できます。

border-collapse属性の使い方

#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属性の使い方