Wie stelle ich den Tabellenrand in CSS auf einen einzeiligen Rand ein? (Detaillierte Code-Erklärung)

Wie stelle ich den Tabellenrand auf einen einzeiligen Rand ein? In diesem Artikel wird Ihnen eine CSS-Methode vorgestellt, mit der Sie den Rahmen einer Tabelle auf einen einzeiligen Rahmen festlegen können. Es hat einen gewissen Referenzwert. Freunde in Not können sich darauf beziehen. Ich hoffe, es wird Ihnen hilfreich sein.

Schauen wir uns zunächst den Standardeffekt nach dem Hinzufügen eines Rahmens zur Tabelle an:

table,table  td{
	border: 1px solid #000;
}
table  td{
	padding: 10px 30px;
}

Wie Sie sehen können, ist die Tabelle doppelt- lined Es wird im Formular angezeigt. Wie kann die Tabelle also mit einem einzeiligen Rand auf der HTML-Seite angezeigt werden? Im Folgenden erläutern wir anhand eines einfachen Codebeispiels eine Methode zum Festlegen eines einzeiligen Rahmens in einer Tabelle.

Einführung in die Methode zum Festlegen einzeiliger Ränder in CSS:

Wir müssen zuerst eine Tabellentabelle auf der HTML-Seite erstellen. Der Code lautet wie folgt:

<table>
	<tr>
		<td>内容</td>
		<td>内容</td>
		<td>内容</td>
		<td>内容</td>
		<td>内容</td>
	</tr>
	<tr>
		<td>内容</td>
		<td>内容</td>
		<td>内容</td>
		<td>内容</td>
		<td>内容</td>
	</tr>
	<tr>
		<td>内容</td>
		<td>内容</td>
		<td>内容</td>
		<td>内容</td>
		<td>内容</td>
	</tr>
	<tr>
		<td>内容</td>
		<td>内容</td>
		<td>内容</td>
		<td>内容</td>
		<td>内容</td>
	</tr>
</table>

Rendering:

Die Tabelle ist erstellt. Sehen wir uns nun an, wie man mithilfe von CSS einen einzeiligen Rahmen zur Tabelle hinzufügt.

1. Fügen Sie zunächst den linken Rand und den oberen Rand zum äußeren Rand der gesamten Tabelle hinzu.

table {
width: 200px;
border-top: 1px solid #999;
border-left: 1px solid #999;
}

2. Fügen Sie jede Zelle in der Tabelle hinzu unterer und rechter Rand der Zelle

table td {
	padding: 10px 30px;
	border-bottom: 1px solid #999;
	border-right: 1px solid #999;
}

3. Entfernen Sie die Lücke der Zelle

table {
	width: 200px;
	border-top: 1px solid #999;
	border-left: 1px solid #999;
	border-spacing: 0;/*去掉单元格间隙*/
}

Anleitung:

border-spacing attribute : Sie können den Abstand zwischen den Rändern benachbarter Zellen festlegen (nur Randtrennungsmodus).

Wenn wir border-spacing: 0; festlegen, bedeutet dies, dass der Abstand zwischen den Rändern (horizontale und vertikale Richtung) jeder benachbarten Zelle in der Tabelle 0 beträgt.

Rendering:

Zusammenfassung: Das Obige ist eine Implementierungsmethode für den einzeiligen Rahmen der in diesem Artikel vorgestellten CSS-Tabelle kann für jeden nützlich sein. Weitere verwandte Tutorials finden Sie unter: CSS-Basis-Video-Tutorial , HTML-Video-Tutorial , Bootstrap-Video-Tutorial !

Das obige ist der detaillierte Inhalt vonWie stelle ich den Tabellenrand in CSS auf einen einzeiligen Rand ein? (Detaillierte Code-Erklärung). Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!