HTML
 Computer >> コンピューター >  >> プログラミング >> HTML

HTMLDOMスタイルborderCollapseプロパティ

borderCollapseプロパティは、

要素に境界線を共有するか個別にするかを設定または返すために使用されます。分離と折りたたみの2つの値を取ることができます。

構文

以下は、-

の構文です。

borderCollapseプロパティの設定-

object.style.borderCollapse = "separate|collapse|initial|inherit"

値

プロパティ値は次のように説明されます-

Sr.No 値と説明
1 別
これはデフォルト値であり、各テーブルセルに個別の境界線があります。
2 崩壊
これは、テーブルセルの値の間に描画されない境界線を指定します。
3 初期
このプロパティを初期値に設定します。
4 継承
親プロパティ値を継承するには

例

borderCollapseプロパティの例を見てみましょう-

<!DOCTYPE html>
<html>
<head>
<style>
   div {
      display: flex;
      float: left;
   }
   table {
      border: 3px solid black;
   }
   td {
      border: 3px solid lightgreen;
   }
   th {
      border: 3px solid lightblue;
   }
</style>
<script>
   function collapseBorder(){
      document.getElementById("t1").style.borderCollapse="collapse";
      document.getElementById("Sample").innerHTML="The table borders are now collapsed";
   }
</script>
</head>
<body>
<table id="t1">
<tr>
<th>FRUITS</th>
<th>PRICE </th>
</tr>
<tr>
<td>MANGO </td>
<td>40</td>
</tr>
<tr>
<td>APPLE</td>
<td>50</td>
</tr>
</table>
<p>Collapse the above table borders by clicking the below button</p>
<button onclick="collapseBorder()">COLLAPSE BORDER</button>
<p id="Sample"></p>
</body>
</html>

出力

これにより、次の出力が生成されます-

HTMLDOMスタイルborderCollapseプロパティ

COLLAPSEBORDERボタンをクリックすると-

HTMLDOMスタイルborderCollapseプロパティ


  1. HTMLDOMスタイルtransformOriginプロパティ

    HTML DOMスタイルのtransformOriginプロパティは、2Dまたは3D変換を返し、HTMLドキュメントの要素に適用します。 構文 以下は構文です- transformOriginを返す object.style.transformOrigin transformOriginの変更 object.style.transformOrigin = “value” 値 ここで、値は-になります。 値 説明 継承 このプロパティ値は親要素から継承されます。 初期 このプロパティ値をデフォルト値に設定します。 x軸y軸z軸 ビュー

  2. HTMLDOMスタイルのcaptionSideプロパティ

    HTML DOM captionSideプロパティは、テーブルキャプションの位置を取得または設定するために使用されます。テーブルキャプションは、垂直位置、つまり上下にのみ設定されます。 以下は、-の構文です。 captionSideプロパティの設定- object.style.captionSide = "top|bottom|initial|inherit" 上記のプロパティは次のように説明されています： 値 説明 top テーブルのキャプションをテーブルの上に配置します。これがデフォルト値です。 下 テーブルのキャプションをテーブルの下に配