Heim >Web-Frontend >CSS-Tutorial >So entfernen Sie Tabellenränder in CSS
So entfernen Sie Tabellenränder in CSS
- 青灯夜游Original
- 2021-10-12 15:55:329947Durchsuche
Entfernungsmethode: 1. Fügen Sie den Stil „border:0;“ zu den Elementen table, th und td hinzu . Fügen Sie den Stil „border-style:none;“ zu den Elementen table, th und td hinzu.
Die Betriebsumgebung dieses Tutorials: Windows7-System, CSS3- und HTML5-Version, Dell G3-Computer.
Hier ist ein HTML-Dokument mit einer Tabelle
<table border="1"> <tr> <th>姓名</th> <th>年龄</th> </tr> <tr> <td>Peter</td> <td>20</td> </tr> <tr> <td>Lois</td> <td>20</td> </tr> </table>
Sie können sehen, dass die Tabelle einen Rand hat. Was sollten Sie also tun, wenn Sie den Tabellenrand entfernen möchten? Nachfolgend werden mehrere Methoden vorgestellt.
Methode 1: border: 0;-Stil zu Tabellen-, th- und td-Elementen hinzufügenborder: 0;样式
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<style>
table,th,td {
border: 0;
}
</style>
</head>
<body>
<table border="1">
<tr>
<th>姓名</th>
<th>年龄</th>
</tr>
<tr>
<td>Peter</td>
<td>20</td>
</tr>
<tr>
<td>Lois</td>
<td>20</td>
</tr>
</table>
</body>
</html>效果图：
方法2：给table、th、td元素添加border-style: none;样式
<style>
table,th,td {
border-style: none;
}
</style>
方法3：给table、th、td元素添加border: transparent;
<style>
table,th,td {
border: transparent;
}
</style>Rendering: 
Methode 2: border-style zu Tabellen-, th- und td-Elementen hinzufügen: keine;Stil
🎜🎜🎜Methode 3: Stil border: transparent; zu Tabellen-, th- und td-Elementen hinzufügen🎜🎜rrreee🎜🎜🎜🎜 (Teilen von Lernvideos: 🎜CSS-Video-Tutorial🎜) 🎜Das obige ist der detaillierte Inhalt vonSo entfernen Sie Tabellenränder in CSS. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!