Des problèmes pour obtenir un 1px frontière sur une table à l'aide de CSS

J'ai essayé beaucoup de combinaisons, mais je n'arrive pas à obtenir un simple 1px frontière sur toutes les cellules et autour d'une table. Voici ce que j'ai:

table.admin    { border-collapse:collapse; }
table.admin,
table.admin td,
table.admin th { border: 1px solid #BBB; padding: 5px; }
table.admin td { text-align:left; }
table.admin th {background-color: #BBB; font-weight: 400; }

<table class="admin">
    <tbody>
  <tr>
    <th>Row</th><th>Row</th>
  </tr>
  <tr>
    <td>abc</td><td>abc</td>
  </tr>
      <tr>
    <td>abc</td><td>abc</td>
  </tr>
</tbody>
</table>

Il a l'air vraiment simple, MAIS ce que je reçois est un tableau où chaque ligne a un fond en bordure de 2px.

J'ai essayé ceci dans un violon Il semble bien là, mais pas sur ma page. Je suis totalement confus car il y a encore cette 2px bordure au bas de chaque ligne. Je ne peux pas voir pourquoi.

Quelqu'un aurait-il des suggestions? Tout ce que je veux, c'est voir les cellules avec une belle 1px frontière qui regarde la même chose autour de chaque cellule. Veuillez noter qu'il semble bon dans la tripoter alors, pourquoi pas dans mon navigateur Firefox 🙁

Voici un autre exemple. Je viens d'ajouter à ma page. J'ai utilisé un autre nom de la classe pour que je puisse être sûr qu'il n'y a rien hérité d'un autre endroit:

<style>
table.admin2    { border-collapse:collapse; }
table.admin2,
table.admin2 td,
table.admin2 th { border: 1px solid #BBB; padding: 5px; }
table.admin2 td { text-align:left; }
table.admin2 th {background-color: #BBB; font-weight: 400; }
</style>
<table class="admin2">
    <tbody>
  <tr>
    <th>Row</th><th>Row</th>
  </tr>
  <tr>
    <td>abc</td><td>abc</td>
  </tr>
      <tr>
    <td>abc</td><td>abc</td>
  </tr>
</tbody>
</table>

Remarque: Après commentaires Spudley j'ai vérifié les autres navigateurs et cela se produit uniquement avec Firefox. Je suis de l'utilisation de Firefox 4. Vous ne savez pas comment résoudre, mais au moins je vois qu'avec un navigateur.

Inclure la totalité de votre page HTML, s'il vous plaît. La marque et le CSS est très bien et rend de ce que vous attendez sur Chrome, Firefox 4 et IE9. Je devine que vous avez des invalides marque de quelque part.
Venez d'ajouter le code HTML. Êtes-vous en train d'essayer avec le violon?
Changement border: 1px solid #BBB à border: 1px solid black de la frontière visible, et autour de tous les éléments.
Vous êtes peut-être mieux de les utiliser cellspacing sur votre table au lieu de donner de l' <th> élément d'une frontière.
quel navigateur(s) êtes-vous tester avec -- cela me fait penser à un bug que j'ai vu dans Firefox où le fond de la frontière sortait trop épais pour aucune raison apparente. Le même code a travaillé dans tous les autres navigateurs, et même Firebug signalé la taille correcte pour de la frontière, donc on a décidé, il doit juste être un bug dans le navigateur.
Maintenant, j'ai 2px noir horizontal frontières et toutes les bordures verticales sont 1px. Je suis l'aide de firefox.
J'ai inclus votre another example simplement dans un fichier HTML (sans doctype). Il semble bien, sur Firefox et Chrome. Veuillez décrire votre problème en détail, il devrait fonctionner correctement.
Wow, je viens d'essayer avec IE et Opera et c'est bon. Je suppose que c'est le bug qui Spudley mentionné !!! Maintenant je me demande comment le résoudre pour Firefox .

InformationsquelleAutor May | 2011-05-27

css html

6

Je suis étonné de ne pas voir dans le violon (à l'aide de FF4), mais voici ce que je pense que vous peut voir:

Puisque chaque cellule a une frontière, naturellement dans entre les lignes, vous verrez qu'il a "doublé", quand il est en fait le haut et le bas de la frontière des deux cellules associées, ou combiné avec de la bordure de la table elle-même pour la première et dernière lignes.

Essayez d'utiliser quelque chose comme ceci:
```
table, th, td {
    border:1px solid #BBB;
}
table {
    border-bottom:0;
    border-left:0;
}
td, th {
    border-top:0;
    border-right:0;
}
```
Espère que j'ai bien compris votre problème correctement, je me souviens d'avoir eu à le faire avant.
- Cela a presque fonctionné. J'ai ajouté border-collapse:collapse; à table, mais encore " les choses ont l'air assez bizarre 🙁
- En fait, je suis dérouté par cette situation, je ne me souviens de bordures de cellule de tableau se comporter si bien qu'ils sont dans votre démo, j'ai toujours souvenu d'avoir à éliminer le border-width comme ça... Pouvez-vous fournir un lien vers votre travail réel, pas dans un violon? Et la version du navigateur qui voyez-vous dans?
- Mon code n'est pas en production, donc je ne peux pas fournir un lien. J'ai commencé à faire plus de recherches et il semble qu'il ya beaucoup de gens qui ont les mêmes problèmes avec firefox. Je suis en train d'essayer différentes solutions maintenant. Semble que firefox n'a pas beaucoup border-collapse et fonctionne un peu différent des autres navigateurs. Je vois le problème dans Firefox 4
- Dites-moi, voyez-vous la question ici? C'est un copier/coller à partir de votre violon, et je ne le vois pas dans FF4. Êtes-vous sûr que ce n'est pas être héritée d'une autre règle de CSS?
- Aussi, je ne vois pas cela dans FF4. J'ai vérifié avec firebug et ne pouvait pas voir l'un quelconque des éléments de la table d'hériter de rien d'autre que de corps.
- Alors... comment cela peut-il être reproduit alors?
- Je vais passer du temps à la recherche dans ce de plus. J'ai déjà supprimé tous les liens de CSS. Les pages ressemble un désordre complet, mais au fond, je vois toujours la même table que les frontières ne cherche pas à droite. Je fais référence jQuery, mais ne peut pas voir comment cela pourrait être en train de faire n'importe quoi et je vais prendre ça et tous les autres qui entoure code.
InformationsquelleAutor Wesley Murch
5

Il suffit de mettre la couleur de la bordure que vous voulez comme couleur d'arrière-plan du tableau, d'une autre couleur que la couleur d'arrière-plan dans les éléments td et de définir une frontière de l'espacement de 1px, comme ceci:
http://jsfiddle.net/JcbLd/1/

InformationsquelleAutor Thiago Duarte

Vous devez vous connecter pour publier un commentaire.