web-dev-qa-db-fra.com

Comment supprimer l'espacement des bordures dans un tableau

J'ai une table, la première rangée est comme

<tr>
<th>1</th>
<th>2</th>
</tr>

Je mets un fond noir à "th". Maintenant, les cellules 1 et 2 ont une sorte de frontière entre elles/les séparant ... J'ai jeté un œil dans le code source et je pense avoir trouvé quelque chose:

border-collapse: separate;
border-spacing: 2px;

Ce code CSS est répertorié dans le code source sous le nom "user agent stylesheettable" et je ne pouvais pas l'activer/le désactiver pour vérifier si tel était le problème, mais j'ai essayé d'ajouter le même code mais avec les paramètres "none" et "0", mais ça n'a pas aidé non plus ...

Quelqu'un peut-il m'aider et me guider d'où vient la frontière, s'il vous plaît?

csshtml-tableborderspacing
24
Alexandru Vlas

Votre table soit comme ci-dessous par défaut et définissez les règles CSS sur les tables ID ou Class

<table border="0" cellspacing="0" cellpadding="0">
 <tr>
  <th>1</th>
  <th>2</th>
</tr>
</table>

css: 

border-collapse: collapse;
38
w3uiguru

Définissez une règle CSS sur votre table:

table {
    border-collapse: collapse;
}

Vous pouvez visiter cet exemple jsFiddle et basculer la propriété border-collapse de collapse en séparation pour voir comment elle modifie la présentation du tableau. La propriété border-collapse peut uniquement être réduite, séparée ou héritée.

10
j08691

border-collapse: none n'est pas valide. Essayez border-collapse: collapse.

6
cp3

vous pouvez utiliser l'effondrement de la frontière. La propriété border-collapse détermine si les bordures du tableau sont réduites en une seule bordure ou détachées comme au format HTML standard.

De http://www.blooberry.com/indexdot/css/properties/table/bcollapse.htm :

Dans le modèle de bordures effondrées CSS2, il est prévu de résoudre les cas où les bordures spécifiées pour les cellules adjacentes sont différentes et en conflit:

  1. Si une bordure partagée comporte un composant pour lequel la «bordure» est définie sur «hidden» pour TOUS les membres partagés, la bordure commune doit être définie de manière inconditionnelle sur «hidden».

  2. Si une bordure partagée comporte un composant pour lequel "border" est défini sur "aucune", elle peut être remplacée par tout autre membre partageant la bordure portant une valeur de propriété "bordure" restituable.

  3. Si TOUS les membres partageant la bordure spécifient une valeur "none" pour un composant de bordure, la bordure sera alors définie sur "none".

  4. Si une bordure partagée a un conflit 'border-width' ((aucun composant ayant une valeur 'frontière' de "hidden") bien sûr, la plus grande largeur de bordure doit être rendue.

  5. Si une frontière partagée a un conflit de type "frontière", la priorité suggérée doit être utilisée (décroissante de gauche à droite): "double", "solid", "dashed", "dotted", "ridge", "outset" , "groove", "inset."

  6. Si une frontière partagée a un conflit 'couleur de bordure', la priorité suggérée doit être utilisée (décroissante de gauche à droite): Cellule de tableau, ligne de tableau, groupe de lignes, colonne, groupe de colonnes, tableau.

    table
  {
   border-collapse:collapse;
  }

Remarque

  1. Dans le modèle de rendu "bordure effondrée", la valeur "encart" du style "bordure" se comporte comme "groove" et celle de "sortie" comme "arête".
  2. CSS2 a spécifié que la valeur initiale de cette propriété était "collapse". Étant donné que Mozilla et Opera se comportent de telle sorte que la valeur initiale est "distincte", CSS2.1 définit maintenant "séparé" la valeur initiale officielle.
2
NullPoiиteя

Essaye ça

table {
    border: none;
    border-spacing: 0;
}
1
Fury