CSS-ボーダー崩壊

説明

border-collapseは、テーブルのレンダリングで使用される境界モデルを決定します。

可能な値

collapse -ボーダーを折りたたんで単一のボーダーにします。隣接する2つのセルは境界線を共有します。
separate -境界線が区切られています。すべてのセルには独自の境界線があり、これらの境界線はテーブル内の他のセルと共有されません。

に適用されます

テーブルまたはインラインテーブルが表示される要素。

DOM構文

object.style.borderCollapse = "Any of the two values";

例

以下は両方の値を表示する例です-

<html>
   <head>
      <style type = "text/css">
         table.one {border-collapse:collapse;}
         table.two {border-collapse:separate;}

         td.a {
            border-style:dotted;
            border-width:3px;
            border-color:#000000;
            padding: 10px;
         }
         td.b {
            border-style:solid;
            border-width:3px;
            border-color:#333333;
            padding:10px;
         }
      </style>
   </head>

   <body>

      <table class = "one">
         <caption>Collapse Border Example</caption>
         <tr><td class = "a"> Cell A Collapse Example</td></tr>
         <tr><td class = "b"> Cell B Collapse Example</td></tr>
      </table>
      <br/>

      <table class = "two">
         <caption>Separate Border Example</caption>
         <tr><td class = "a"> Cell A Separate Example</td></tr>
         <tr><td class = "b"> Cell B Separate Example</td></tr>
      </table>

   </body>
</html>

これにより、次の結果が生成されます–

Css-border-collapse

目次

CSS-ボーダー崩壊

説明

可能な値

に適用されます

DOM構文

例