Comment définir la bordure du tableau sur une bordure d'une seule ligne en CSS ? (explication détaillée du code)

Comment définir la bordure du tableau sur une seule ligne ? Cet article vous présentera une méthode CSS pour définir la bordure d'un tableau sur une bordure sur une seule ligne. Il a une certaine valeur de référence. Les amis dans le besoin peuvent s'y référer. J'espère qu'il vous sera utile.

Tout d'abord, jetons un coup d'œil à l'effet par défaut après avoir ajouté une bordure au tableau :

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

Comme vous pouvez le voir, le tableau est en double Il s'affiche sous forme de ligne, alors comment faire en sorte que le tableau forme une bordure sur une seule ligne sur la page HTML ? Ci-dessous, nous utiliserons un exemple de code simple pour expliquer une méthode de définition d'une bordure sur une seule ligne dans un tableau.

Introduction à la méthode de définition des bordures sur une seule ligne en CSS :

Nous devons d'abord créer un tableau table sur la page html, le code est le suivant :

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

Rendu :

Le tableau est construit Voyons maintenant comment ajouter une bordure sur une seule ligne au tableau en utilisant CSS.

1. Tout d'abord, ajoutez la bordure gauche et la bordure supérieure à la bordure extérieure de l'ensemble du tableau

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

2. tableau Ajoutez des bordures en bas et à droite à chaque cellule

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

3. Supprimez l'espace entre les cellules

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

Instructions :

propriété border-spacing : Vous pouvez définir la distance entre les bordures des cellules adjacentes (uniquement pour le mode "séparation des bordures").

Lorsque nous définissons border-spacing : 0;, cela signifie que la distance entre les bordures (directions horizontale et verticale) de chaque cellule adjacente du tableau est de 0.

Rendu :

Résumé : Ce qui précède est une méthode d'implémentation de la bordure sur une seule ligne de la table CSS présentée dans cet article. peut être utile à tout le monde. Pour plus de didacticiels connexes, veuillez visiter : Tutoriel vidéo de base CSS , Tutoriel vidéo HTML , Tutoriel vidéo bootstrap  !

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!