Heim > Web-Frontend > CSS-Tutorial > So verstecken Sie eine Tabelle in CSS

So verstecken Sie eine Tabelle in CSS

醉折花枝作酒筹
Freigeben: 2023-01-05 16:10:20
Original
2535 Leute haben es durchsucht

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 .

So verstecken Sie eine Tabelle in CSS

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>
Nach dem Login kopieren

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>
Nach dem Login kopieren

Öffnen Sie die Datei test.html im Browser, um den Effekt zu sehen.

So verstecken Sie eine Tabelle in CSS

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!

Verwandte Etiketten:
Quelle:php.cn
Erklärung dieser Website
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn
Beliebte Tutorials
Mehr>
Neueste Downloads
Mehr>
Web-Effekte
Quellcode der Website
Website-Materialien
Frontend-Vorlage