HTML DOM スタイル borderCollapse プロパティの使い方を徹底解説
borderCollapseプロパティは、<table>要素のセル同士が境界線（ボーダー）を共有するか、それとも個別に表示するかを設定・取得するために使用されるプロパティです。指定できる値は「separate」と「collapse」の2種類があります。
構文
borderCollapseプロパティの基本構文は以下のとおりです。
■ borderCollapseプロパティの設定方法
object.style.borderCollapse = "separate|collapse|initial|inherit"
プロパティ値の一覧
borderCollapseプロパティに指定できる各値の意味は以下の表のとおりです。
| No. | 値と説明 |
|---|---|
| 1 | separate デフォルト値です。各テーブルセルに個別の境界線が表示され、セル間に隙間ができます。 |
| 2 | collapse 隣接するセル同士の境界線を結合し、1本のボーダーとして描画します。セル間に重複した罫線が表示されなくなります。 |
| 3 | initial このプロパティを初期値（デフォルト値）に戻します。 |
| 4 | inherit 親要素のプロパティ値を継承します。 |
サンプルコード
ここで、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="テーブルの境界線が結合されました";
}
</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>下のボタンをクリックすると、上のテーブルの境界線が結合されます</p>
<button onclick="collapseBorder()">COLLAPSE BORDER</button>
<p id="Sample"></p>
</body>
</html>
実行結果
上記のコードを実行すると、まず次のように各セルに個別の境界線が表示された状態でテーブルが出力されます。
続いて、「COLLAPSE BORDER」ボタンをクリックすると、JavaScriptによってborderCollapseプロパティが「collapse」に変更され、以下のようにセル間の境界線が結合された状態で表示されます。
-
HTML DOM スタイルの transformOrigin プロパティとは？使い方を徹底解説
HTML DOM のスタイルオブジェクトが持つ transformOrigin プロパティは、HTML ドキュメント内の要素に対して 2D または 3D 変換を行う際の「原点（基準点）」を取得・設定するためのプロパティです。要素を回転や拡大縮小させる transform プロパティと組み合わせて使うことで、変換の基準となる位置を自由にコントロールできます。構文（シンタックス）transformOrigin プロパティの基本的な構文は以下のとおりです。値の取得object.style.transformOrigin値の設定object.style.transformOrigin = 値指定できる
-
HTML DOM の captionSide プロパティとは？表キャプション位置の設定方法を解説
HTML DOM の captionSide プロパティは、表（テーブル）のキャプション（caption 要素）の表示位置を取得・設定するために使用されます。指定できるのは垂直方向の位置のみで、「上（top）」または「下（bottom）」のいずれかとなります。 captionSide プロパティの構文 captionSide プロパティを設定する際の基本構文は以下のとおりです。 object.style.captionSide = top|bottom|initial|inherit 設定できる値 値説明 topキャプションを表の上に配置します。デフォルト値です。 bottomキャプシ