So verbergen Sie Tabellenspalten mit CSS

Mit der Entwicklung des Webdesigns sind uns Tabellen als eine der frühesten Seitenlayoutmethoden einigermaßen vertraut und werden im Webdesign häufig verwendet. Als HTML-Auszeichnungssprache mit umfangreichen Satzfunktionen werden Tabellen häufig im Webdesign verwendet und häufig zur Darstellung komplexer Dateninformationen und Diagramme verwendet. In manchen Fällen möchten wir jedoch möglicherweise nicht alle Informationen in der Tabelle anzeigen, sondern nur einen Teil davon. In diesem Fall bietet CSS eine sehr einfache und effektive Möglichkeit, bestimmte Spalten in der Tabelle auszublenden. Heute lernen wir, wie man Tabellenspalten mit CSS ausblendet.

1. Das Anzeigeattribut im CSS-Stylesheet

Wir wissen, dass es in CSS ein Attribut namens display gibt, das den Anzeigestatus eines Elements festlegen kann. Für Text kann das Anzeigeattribut beispielsweise auf „ gesetzt werden. none"-Wert. Es ist versteckt. Um Tabellenspalten auszublenden, können wir also das Anzeigeattribut verwenden, um Tabellenspalten auszublenden.

2. Implementierungsmethode zum Ausblenden von Spalten

Als nächstes verwenden wir eine einfache HTML-Tabelle zur Demonstration. Gleichzeitig müssen wir nur einen Stil in CSS hinzufügen, um die Funktion zum Ausblenden von Spalten zu realisieren.

Zuerst definieren wir eine einfache HTML-Tabelle und legen Stile dafür fest.

nbsp;html>


    <meta>
    <title>So verbergen Sie Tabellenspalten mit CSS</title>
    <style>
        table{
            border: 1px solid black;
            border-collapse: collapse;
        }
        th, td{
            border: 1px solid black;
            padding: 5px;
        }
    </style>


    

                                                                                                                                                                                                                                                                                                                                                                                                                                

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

In der Stileinstellung legen wir einen grundlegenden Tabellenstil fest, einschließlich des äußeren Randes der Tabelle, Zellabstände usw. Daher sieht unsere Tabelle so aus:

Angenommen, wir möchten die zweite Spalte der Tabelle „Geschlecht“ ausblenden, dann müssen wir nur das Anzeigeattribut verwenden.

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

Verwenden Sie die obige CSS-Anweisung, um den Effekt zu erzielen, dass das „Geschlecht“ in der zweiten Spalte der Tabelle ausgeblendet wird. Mit anderen Worten, über das CSS-Attribut „Selektor: nth-child(n)“ können wir das td- oder th-Element erhalten, das einer bestimmten Anzahl von Spalten in der Tabelle entspricht, und über den display:none-Wert des Stils die Elemente von Diese Spalte kann ausgeblendet werden.

Hier erklären wir die Bedeutung der CSS-Anweisung:

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

Wir sehen, dass die Verwendung des Anzeigeattributs sehr einfach ist. Sie müssen nur die obige Codezeile zum ursprünglichen CSS-Stil hinzufügen, um die Funktion des Ausblendens einer Tabelle zu erreichen Spalten. Schauen wir uns nun die konkreten Auswirkungen an.

Wie Sie auf dem Bild sehen können, wurde die zweite Spalte „Geschlecht“ erfolgreich ausgeblendet.

3. Der Unterschied zwischen ausgeblendeten und abgeschnittenen Spalten

In CSS gibt es ein weiteres Attribut namens „truncated“, das auch zum Ausblenden von Spalten in Tabellen verwendet werden kann. Der Unterschied zu hide besteht darin, dass hide nur das Element verbirgt, während truncated das Element auf eine Breite von 0 Pixel streckt, um einen vollständig verborgenen und nicht besetzenden Effekt zu erzielen.

Der Code von truncated lautet wie folgt:

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

In truncated setzen wir nicht nur die Breite des Elements auf 0, sondern auch den Abstand und den Rand auf 0. Verwenden Sie außerdem „white-space:nowrap“, um den Inhalt leicht nach links zu verschieben und zu verhindern, dass er umbrochen wird. Auf diese Weise haben wir die zweite Zeile der Tabelle „Geschlecht“ erfolgreich ausgeblendet.

4. Anwendungsszenarien von Hide- und Truncated-Methoden

Als nächstes fassen wir kurz die Anwendungsszenarien von Hide- und Truncated-Methoden zusammen.

Die Methode zum Ausblenden eignet sich besser für Szenen, bei denen zwischen Ein- und Ausblenden gewechselt werden muss, z. B. Untermenüs in der Menüleiste. Darüber hinaus eignet sich hide auch zum Ausblenden bestimmter abnormaler Daten in Tabellen, um die Schönheit und Anwendbarkeit der Seite sicherzustellen.

Die verkürzte Methode eignet sich besser für Szenarien, in denen bestimmte Daten in der Tabelle ausgeblendet werden müssen, während das Layout und die Hierarchie der Tabelle beibehalten werden müssen. Beispielsweise können wir in der Kommentarliste eines Blogs die vertraulichen Informationen des Benutzers ausblenden. dehnt seine Identitätsinformationen immer noch auf 0 aus und belegt keinen Layoutraum.

Zusammenfassend lässt sich sagen, dass der Unterschied zwischen der Methode zum Ausblenden und der Methode zum Abschneiden von den Designanforderungen und der Art der Tabelle abhängt, in der Daten ausgeblendet werden müssen. Wenn wir es verwenden, sollten wir entsprechend der tatsächlichen Situation wählen.

Das obige ist der detaillierte Inhalt vonSo verbergen Sie Tabellenspalten mit CSS. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!