Maison > Article > interface Web > Comment éliminer les espaces entre les tables en CSS

Comment éliminer les espaces entre les tables en CSS

WBOYoriginal: 2021-12-09 09:54:453233parcourir

En CSS, vous pouvez utiliser l'attribut "border-collapse" pour éliminer les espaces entre les tableaux. Cet attribut peut définir si les bordures entre les tableaux sont fusionnées. Lorsque la valeur de l'attribut est réduite, les espaces entre les tableaux peuvent être éliminés. et les bordures sont fusionnées. La syntaxe est " Table element {border-collapse:collapse;}".

L'environnement d'exploitation de ce tutoriel : système Windows 10, version CSS3&&HTML5, ordinateur Dell G3.

Comment éliminer les espaces entre les tableaux en CSS

En CSS, si vous souhaitez éliminer les espaces entre les tableaux, vous pouvez utiliser l'attribut border-collapse L'attribut border-collapse est utilisé pour définir si le. les bordures des tableaux sont fusionnées en un seul. Les bordures sont toujours affichées séparément comme dans le HTML standard.

Si la valeur de l'attribut est définie pour s'effondrer, les bordures entre les tables seront fusionnées en une seule bordure, et les deux tables partageront une bordure, éliminant ainsi l'espace entre les tables.

Comment éliminer les espaces entre les tables en CSS

L'exemple est le suivant :

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Document</title>
  <style>
    table {
    border-collapse:collapse;
}
  </style>
</head>
<body>
<table border="1">
  <tr>
    <td>111</td>
    <td>222</td>
  </tr>
  <tr>
    <td>333</td>
    <td>444</td>
  </tr>
    <tr>
    <td>555</td>
    <td>666</td>
  </tr>
  <tr>
    <td>777</td>
    <td>888</td>
  </tr>
</table>
<table border="1">
  <tr>
    <td>111</td>
    <td>222</td>
  </tr>
  <tr>
    <td>333</td>
    <td>444</td>
  </tr>
    <tr>
    <td>555</td>
    <td>666</td>
  </tr>
  <tr>
    <td>777</td>
    <td>888</td>
  </tr>
</table>
</body>
</html>

Résultat de sortie :

Comment éliminer les espaces entre les tables en CSS

(Partage vidéo d'apprentissage : tutoriel vidéo CSS)

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!

html5 css css3 html border

Déclaration：

Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn

Article précédent：Comment supprimer l'espacement des bordures du navigateur avec CSSArticle suivant：Comment supprimer l'espacement des bordures du navigateur avec CSS

Articles Liés

Voir plus