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

JavaScriptでテーブルの境界線を1つの線に折りたたむ（borderCollapse）方法

JavaScriptでHTMLテーブルのセル同士の境界線を1本にまとめたい場合は、borderCollapseプロパティを使用し、値として「collapse」を設定します。この設定を有効にすると、隣接するセルの境界線が結合され、余分な二重線が消えてすっきりとした見た目の表になります。

borderCollapseプロパティの主な値

  • collapse … 隣接するセルの境界線を1本に結合して表示します。
  • separate … 各セルの境界線を独立させて表示します（初期値）。

サンプルコード

以下の例では、「Click to collapse」ボタンをクリックすると、JavaScriptによってテーブルの境界線が折りたたまれ、1本の線にまとまります。実際にブラウザで実行して動作を確認してみてください。

<!DOCTYPE html>
<html>
   <body>
      <table id="newTable" border="2">
         <tr>
            <th>社員ID</th>
            <th>氏名</th>
            <th>部署</th>
         </tr>
         <tr>
            <td>001</td>
            <td>Amit</td>
            <td>IT</td>
         </tr>
         <tr>
            <td>002</td>
            <td>John</td>
            <td>Finance</td>
         </tr>
         <tr>
            <td>003</td>
            <td>David</td>
            <td>Marketing</td>
         </tr>
      </table>
      <br>
      <button onclick="display()">クリックして折りたたむ</button>
      <script>
         function display() {
            document.getElementById("newTable").style.borderCollapse = "collapse";
         }
      </script>
   </body>
</html>

コードの解説

ボタンがクリックされるとdisplay()関数が呼び出されます。document.getElementById("newTable")で対象のテーブル要素を取得し、そのstyle.borderCollapseに「collapse」を代入することで、境界線の折りたたみが動的に有効化されます。

なお、CSS側であらかじめ table { border-collapse: collapse; } と指定しておけば、JavaScriptを使わずに同じ効果を得ることも可能です。状況に応じて使い分けるとよいでしょう。

  1. JavaScriptでフレックスアイテムの折り返し（flexWrap）を設定する方法

    JavaScriptでフレックスコンテナ内のアイテムを折り返すかどうかを設定するには、flexWrapプロパティを使用します。このプロパティにより、アイテムがコンテナの幅を超えた場合に、新しい行へ折り返すかどうかを動的に制御できます。 flexWrapプロパティの主な値 nowrap：アイテムを折り返さず、すべて1行に並べます（デフォルト値）。 wrap：必要に応じてアイテムを次の行へ折り返します。 wrap-reverse：折り返し方向を逆にして、アイテムを配置します。 サンプルコード 以下のコードを実行すると、JavaScriptでflexWrapプロパティを設定する方法を確認でき

  2. JavaScriptで空のセルの境界線・背景が非表示かどうかを確認する方法

    JavaScriptで表（テーブル）の空のセルの境界線や背景が非表示になっているかどうかを調べるには、emptyCells プロパティを使用します。このプロパティは、CSSの empty-cells プロパティに対応しており、値を取得することで現在の設定状態を確認できます。取得できる値は主に以下の2つです。show: 空のセルにも境界線と背景を表示する（初期値）hide: 空のセルの境界線と背景を非表示にするサンプルコード以下のコードでは、テーブルに empty-cells: hide; を設定した上で、ボタンをクリックするとJavaScriptで emptyCells プロパティの値を取得し