Bootstrap 5を使用してモバイルでテーブルの列を非表示にする方法

2024-02-08 11:20 Bootstrap 5 モバイル

  1. CSSを使用する方法: テーブルの非表示にしたい列に対して、CSSの display プロパティを使用します。例えば、以下のように列のクラスに d-none d-md-table-cell を追加します。

    <table>
 <tr>
   <th>列1</th>
   <th class="d-none d-md-table-cell">列2</th>
   <th>列3</th>
 </tr>
 <tr>
   <td>データ1</td>
   <td class="d-none d-md-table-cell">データ2</td>
   <td>データ3</td>
 </tr>
</table>

    これにより、モバイルデバイスでは列2が非表示になりますが、中サイズ以上のデバイスでは表示されます。

  2. JavaScriptを使用する方法: jQueryや純粋なJavaScriptを使用して、テーブルの列を動的に制御することもできます。以下にJavaScriptの例を示します。

    <table id="myTable">
 <tr>
   <th>列1</th>
   <th>列2</th>
   <th>列3</th>
 </tr>
 <tr>
   <td>データ1</td>
   <td>データ2</td>
   <td>データ3</td>
 </tr>
</table>
<script>
 // モバイルデバイスで列2を非表示にする
 if (window.innerWidth <= 768) {
   var table = document.getElementById("myTable");
   var rows = table.getElementsByTagName("tr");
   for (var i = 0; i < rows.length; i++) {
     var cells = rows[i].getElementsByTagName("td");
     cells[1].style.display = "none";
   }
 }
</script>

    上記の例では、ウィンドウの幅が768px以下の場合に列2が非表示になります。

これらはBootstrap 5を使用してモバイルでテーブルの列を非表示にする方法の一部です。必要に応じて、他の方法や応用的なカスタマイズも可能です。