So verwenden Sie CSS zum Ausblenden von Tabellen

In der Frontend-Entwicklung sind Tabellen eine sehr häufige Komponente zur Darstellung von Daten. Manchmal möchten wir jedoch nicht alle Daten anzeigen, sondern müssen eine bestimmte Spalte oder Zeile ausblenden. Zu diesem Zeitpunkt müssen wir CSS verwenden, um die Tabelle auszublenden.

1. Tabellenspalten ausblenden

1 Verwenden Sie das Anzeigeattribut

Wir können das Anzeigeattribut in CSS verwenden, um eine Spalte der Tabelle auszublenden . Die spezifischen Schritte lauten wie folgt:

Legen Sie zunächst einen speziellen Klassennamen für die Spalte fest, die ausgeblendet werden soll. Beispielsweise nennen wir die Spalte, die wir ausblenden möchten, „hidden-column“.

Setzen Sie dann in CSS

    .hidden-column { 
      display: none; 
    }

auf die Spalte, die diesem Klassennamen entspricht, damit diese Spalte ausgeblendet wird.

Hier ist zum Beispiel eine einfache Tabelle:

<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>

Wenn wir die Spalte „E-Mail“ der Tabelle ausblenden möchten, können wir Folgendes tun:

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

Der :nth-child()-Selektor von CSS wird hier verwendet, um anzugeben, welche Spalte ausgeblendet werden muss.

2. Verwenden Sie das Sichtbarkeitsattribut

Eine andere Möglichkeit, Spalten auszublenden, ist die Verwendung des Sichtbarkeitsattributs in CSS. Der Unterschied zum Anzeigeattribut besteht darin, dass die ausgeblendete Spalte weiterhin ihre ursprüngliche Position auf der Seite einnimmt, wenn wir das Sichtbarkeitsattribut zum Ausblenden einer Tabellenspalte verwenden. Bei Verwendung des Anzeigeattributs wird die ausgeblendete Spalte entfernt Von der Seite entfernt.

Der Code hier ähnelt auch der ersten Methode. ：

.hidden-column {
  visibility: hidden;
}

2. Tabellenzeilen ausblenden

Um die gesamte Tabellenzeile auszublenden, können wir eine Methode verwenden, die dem Ausblenden von Spalten ähnelt.

1. Verwenden Sie das Anzeigeattribut

Ähnlich wie beim Ausblenden von Spalten können wir auch das Anzeigeattribut in CSS verwenden, um Tabellenzeilen auszublenden. Die spezifischen Schritte lauten wie folgt:

Legen Sie zunächst einen speziellen Klassennamen für die Zeile fest, die ausgeblendet werden soll. Beispielsweise nennen wir die zweite Zeile, die ausgeblendet werden muss, „hidden-row“.

Dann legen Sie in CSS die Zeile fest, die diesem Klassennamen entspricht:

.hidden-row {
  display: none;
}

2. Verwenden Sie das Sichtbarkeitsattribut

Ähnlich wie beim Ausblenden von Spalten. Wir können Tabellenzeilen auch mithilfe der Sichtbarkeitseigenschaft in CSS ausblenden. Ebenso belegt eine mit dieser Methode ausgeblendete Tabellenzeile weiterhin ihre ursprüngliche Position auf der Seite, ist aber nicht mehr sichtbar.

Der Code zum Ausblenden von Tabellenzeilen mithilfe des Sichtbarkeitsattributs lautet wie folgt:

.hidden-row {
  visibility: hidden;
}

3. Zusammenfassung

Oben erfahren Sie, wie Sie CSS verwenden Tabellenspalten oder -zeilen ausblenden. Unabhängig davon, welche Methode Sie verwenden, können Sie Tabellenzellen oder -zeilen über bestimmte HTML-Elemente oder CSS-Selektoren ausblenden. Im eigentlichen Entwicklungsprozess können das Verständnis und die Verwendung dieser Techniken den Stil und das Layout von Tabellen besser steuern und die Effizienz der Front-End-Entwicklung verbessern.

Das obige ist der detaillierte Inhalt vonSo verwenden Sie CSS zum Ausblenden von Tabellen. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!