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

Web デザインの発展に伴い、テーブルは初期のページ レイアウト方法の 1 つとして私たちにある程度馴染みがあり、Web デザインで広く使用されています。テーブルは、豊富な組版機能を備えた HTML マークアップ言語として、Web デザインで頻繁に使用され、複雑なデータ情報やグラフを表示するためによく使用されます。ただし、場合によっては、テーブル内のすべての情報ではなく、その一部だけを表示したい場合があります。この場合、CSS はテーブル内の特定の列を非表示にする非常に簡単で効果的な方法を提供します。今日はCSSを使用してテーブルの列を非表示にする方法を学びます。

1. CSS スタイル シートの display 属性

CSS には、要素の表示状態を設定できる display という属性があることがわかっています。たとえば、テキストの場合、 display 属性を渡すことができます。非表示にするには、値「none」に設定します。したがって、テーブル列を非表示にする場合は、display 属性を使用してテーブル列を非表示にすることができます。

2. 列非表示の実装方法

次に、簡単な HTML テーブルを使用して説明します。同時に、CSS でスタイルを追加するだけで列を非表示にする機能を実現できます。

まず、単純な HTML テーブルを定義し、そのテーブルにスタイルを設定します。

nbsp;html>


    <meta>
    <title>CSSを使用してテーブルの列を非表示にする方法</title>
    <style>
        table{
            border: 1px solid black;
            border-collapse: collapse;
        }
        th, td{
            border: 1px solid black;
            padding: 5px;
        }
    </style>


    

                                                                                                                                                                                                                                                                                                                                                                                                                                

姓名	性别	年龄	居住地址
张三	男	25	北京市
李四	女	30	上海市
王五	男	28	广州市

スタイル設定では、表の外枠やセルの隙間など、基本的な表のスタイルを設定します。したがって、テーブルは次のようになります。

テーブルの 2 番目の列「Gender」を非表示にしたいとします。その場合は、display 属性を使用するだけで済みます。

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

上記の CSS ステートメントを使用すると、テーブルの 2 列目の「性別」を非表示にする効果を実現できます。つまり、CSS セレクター: nth-child(n) 属性を通じて、テーブル内の特定の数の列に対応する td または th 要素を取得できます。また、スタイルの display:none 値を通じて、要素を取得できます。この列の部分は非表示にすることができます。

ここでは、CSS ステートメントの意味を説明します:

table td:nth-child(2),  // 选中表格第二列td
table th:nth-child(2){  // 选中表格第二列th
    display: none;   // 隐藏所选择的td、th
}

display 属性の使用は非常に簡単であることがわかります。上記のコード行を元の CSS に追加するだけです。非表示を実現するスタイル テーブル列関数。では、具体的な効果を見ていきましょう。

画像からわかるように、2 番目の列「性別」が正常に非表示になりました。

3. 非表示列と切り詰められた列の違い

CSS には、truncated と呼ばれる別の属性があり、テーブル内の列を非表示にするために使用することもできます。 Hide との違いは、Hide は要素を非表示にするだけであるのに対し、truncated は要素を幅 0 ピクセルに引き伸ばして完全に非表示にし、スペースを占有しない効果を実現することです。

truncated のコードは次のとおりです:

table td:nth-child(2),
table th:nth-child(2){
    width: 0;
    padding: 0;
    border: none;
    white-space: nowrap;
}

truncated では、要素の幅を 0 に設定するだけでなく、パディングとボーダーも 0 に設定します。また、white-space:nowrap を使用してコンテンツを少し左に移動し、折り返されないようにします。このようにして、テーブルの 2 行目の「性別」を非表示にすることができました。

4. Hide メソッドと truncated メソッドの適用シナリオ

次に、hide メソッドと truncated メソッドの適用シナリオを簡単にまとめます。

非表示方法については、メニューバーのサブメニューなど、表示と非表示を切り替える必要があるシーンに適しています。さらに、ページの美しさと適用性を確保するために、表内の特定の異常なデータを非表示にする場合にも、Hide は適しています。

truncated メソッドは、テーブルのレイアウトと階層を保持しながら、テーブル内の特定のデータを非表示にする必要があるシナリオに適しています。たとえば、ブログのコメント リストでは、ユーザーの機密情報を非表示にできます。は非表示になっており、その ID 情報は 0 に引き伸ばされたままなので、レイアウト スペースを占有しません。

要約すると、非表示メソッドと切り捨てメソッドの違いは、設計要件と、データを非表示にする必要があるテーブルの性質によって異なります。使用する場合は、実際の状況に応じて選択する必要があります。

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