Heim >Web-Frontend >CSS-Tutorial >So verstecken Sie eine Tabelle in CSS
So verstecken Sie eine Tabelle in CSS
- 醉折花枝作酒筹Original
- 2021-04-21 14:27:322537Durchsuche
In CSS können Sie das Anzeigeattribut verwenden, um die Tabelle auszublenden. Sie müssen nur den Stil „display:none“ für das tr-Element festlegen. Das Anzeigeattribut wird verwendet, um den Typ des vom Element generierten Anzeigefelds beim Einrichten des Layouts zu definieren. Wenn der Wert „None“ ist, bedeutet dies, dass das Element nicht angezeigt und vom Dokumentfluss getrennt wird und keinen tatsächlichen Platz einnimmt .
Die Betriebsumgebung dieses Tutorials: Windows7-System, CSS3- und HTML5-Version, Dell G3-Computer.
Erstellen Sie eine neue HTML-Datei und nennen Sie sie test.html. Verwenden Sie in der test.html-Datei das Tabellen-Tag, um eine Tabelle mit drei Zeilen und zwei Spalten zu erstellen.
Setzen Sie in der Datei test.html das ID-Attribut der zweiten Zeile auf mytarget und verwenden Sie CSS, um es unten auszublenden.
<body>
<table border="1">
<tr>
<td>19999</td>
<td>19999</td>
</tr>
<tr id="mytarget">
<td>19999</td>
<td>19999</td>
</tr>
<tr>
<td>19999</td>
<td>19999</td>
</tr>
</table>
</body>Stellen Sie im CSS-Tag die Breite der Tabelle auf 280 Pixel und die Höhe durch die Tabelle auf 180 Pixel ein. Legen Sie den Stil der zweiten Zeile der Tabelle über die ID fest und setzen Sie das Anzeigeattribut auf „Keine“, um es auszublenden.
<style>
table{
width: 280px;
height: 180px;
}
#mytarget{
display:none;
}
</style>Öffnen Sie die Datei test.html im Browser, um den Effekt zu sehen.
Empfohlenes Lernen: CSS-Video-Tutorial
Das obige ist der detaillierte Inhalt vonSo verstecken Sie eine Tabelle in CSS. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!