CSS を使用してテーブルを非表示にする方法

フロントエンド開発では、テーブルはデータを表示するために使用される非常に一般的なコンポーネントです。ただし、すべてのデータを表示したくないが、特定の列または行を非表示にする必要がある場合があります。このとき、CSSを使用してテーブルを非表示にする必要があります。

1. テーブルの列を非表示にする

1. 表示属性を使用する

CSS の表示属性を使用して、テーブルの列を非表示にすることができます。具体的な手順は次のとおりです。

まず、非表示にする必要がある列の特別なクラス名を設定します。たとえば、非表示にしたい列に「hidden-column」という名前を付けます。

次に、CSS で、このクラス名に対応する列に

    .hidden-column { 
      display: none; 
    }

を設定して、この列が非表示になるようにします。

たとえば、次は単純なテーブルです:

<table>
  <thead>
    <tr>
      <th>Name</th>
      <th>Age</th>
      <th>Email</th>
      <th>Phone</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>Tom</td>
      <td>23</td>
      <td>tom@example.com</td>
      <td>(123) 456-7890</td>
    </tr>
    <tr>
      <td>Jane</td>
      <td>27</td>
      <td>jane@example.com</td>
      <td>(987) 654-3210</td>
    </tr>
    <tr>
      <td>John</td>
      <td>35</td>
      <td>john@example.com</td>
      <td>(111) 222-3333</td>
    </tr>
  </tbody>
</table>

テーブルの「電子メール」列を非表示にしたい場合は、次のようにすることができます:

td:nth-child(3),
th:nth-child(3) {
  display: none;
}

Here CSS :nth-child() セレクターを使用して、非表示にする必要がある列を指定します。

2. 可視性属性を使用する

列を非表示にするもう 1 つの方法は、CSS で可視性属性を使用することです。これと表示属性の違いは、可視性属性を使用してテーブルの列を非表示にしても、非表示の列はページ上の元の位置を占めますが、非表示になることです。表示属性を使用すると、非表示の列は削除されます。ページから。ページ レイアウトから削除されました。

ここのコードも最初のメソッドと似ています。 ：

.hidden-column {
  visibility: hidden;
}

2. テーブルの行を非表示にする

テーブルの行全体を非表示にするには、列を非表示にするのと同様の方法を使用できます。

1.表示属性を使用する

列を非表示にするのと同様に、CSS の表示属性を使用してテーブルの行を非表示にすることもできます。具体的な手順は次のとおりです。

まず、非表示にする必要がある行に特別なクラス名を設定します。たとえば、非表示にする必要がある 2 行目に「hidden-row」という名前を付けます。

次に、CSS で、このクラス名に対応する行を設定します:

.hidden-row {
  display: none;
}

2. 可視性属性を使用します

列を非表示にするのと同様に、CSS 可視性を使用することもできます。テーブルの行を非表示にするプロパティ。同様に、この方法を使用して非表示にしたテーブル行は、ページ上の元の位置を占めていますが、表示されなくなります。

可視性属性を使用してテーブルの行を非表示にするコードは次のとおりです:

.hidden-row {
  visibility: hidden;
}

3. 概要

上記は、CSS を使用してテーブルの列または行を非表示にする方法です。 。どの方法を使用する場合でも、特定の HTML 要素または CSS セレクターを使用して表のセルまたは行を非表示にすることができます。実際の開発プロセスでは、これらのテクニックを理解して使用することで、テーブルのスタイルとレイアウトをより適切に制御し、フロントエンドの開発効率を向上させることができます。

以上がCSS を使用してテーブルを非表示にする方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。