web-dev-qa-db-fra.com

Utilisation de CSS pour différencier la couleur de la bordure extérieure du tableau de celle des cellules

Je souhaite utiliser CSS pour définir une couleur de la bordure extérieure du tableau ... Les cellules intérieures auront alors une couleur de bordure différente ...

J'ai créé quelque chose comme ça:

table {
     border-collapse:collapse;
     border: 1px solid black; 
}

table td {
     border: 1px solid red;
}

Le problème est que la couleur de la table change et devient rouge, comme vous pouvez le voir ici: http://jsfiddle.net/JaF5h/

Si la largeur de la table est augmentée à 2 pixels, cela fonctionnera: http://jsfiddle.net/rYCrp/

Cela fait si longtemps que je suis confronté à des problèmes de CSS et de navigateurs croisés ... C'est la première fois que je suis confronté à quelque chose comme ça et je suis totalement bloqué ... Aucune idée de ce qu'il faut faire!

Tout le monde sait comment résoudre ce problème avec border-width: 1px?

17
Ahmad Alfy

Je voudrais réaliser cela en utilisant des sélecteurs adjacents, comme ceci:

table {
    border: 1px solid #000;
}

tr {
    border-top: 1px solid #000;
}

tr + tr {
    border-top: 1px solid red;
}

td {
    border-left: 1px solid #000;
}

td + td {
    border-left: 1px solid red;
}

C'est un peu répétitif, mais vous obtenez l'effet recherché en définissant les bordures supérieure et gauche de la première ligne et de la première colonne, puis en remplaçant les lignes et les cellules «internes» par du rouge.

Cela ne fonctionnera évidemment pas dans IE6 car il ne comprend pas les sélecteurs adjacents.

http://jsfiddle.net/JaF5h/36/

13
ajcw

Essaye ça:

tbody { display:block; margin: -1px; }
7
Atari

Les réponses précédentes n'ont pas complètement résolu cela pour moi. La réponse acceptée permet aux bordures internes de chevaucher la bordure de table externe. Après quelques expériences, j'ai trouvé la solution suivante.

En définissant le style de réduction de la table pour séparer les bordures internes, ne chevauchez pas les bordures extérieures. À partir de là, les frontières supplémentaires et doublées sont éliminées.

HTML:

<table>
<tr>
    <td>Content</td>
    <td>Content</td>
    <td>Content</td>
</tr>
 <tr>
     <td>Content</td>
     <td>Content</td>
     <td>Content</td>
</tr>
 <tr>
     <td>Content</td>
     <td>Content</td>
     <td>Content</td>
</tr>

CSS

table {
    border: 1px solid black;
    border-collapse: separate;
    border-spacing: 0;
}
table td, table th {
    border: 1px solid red;
}

table tr td {
    border-right: 0;
}
table tr:last-child td {
    border-bottom: 0;
}
table tr td:first-child,
table tr th:first-child {
    border-left: 0;
}
table tr td{
    border-top: 0;
}

https://jsfiddle.net/o5ar81xg/

5
Mike

Créez une div entourant votre table. Définissez la couleur de la bordure div pour l'extérieur de votre table. NE PAS effondrer votre table. Au lieu de cela, laissez vos cellules séparées pour afficher la couleur d'arrière-plan (bordures intérieures) de la division inférieure Puis définissez les cellules d’arrière-plan sur la couleur d’arrière-plan de votre choix.

HTML:

<div id="tableDiv">
    <table id="studentInformationTable">
        <!-- Add your rows, headers, and cells here -->
    </table>
</div>

CSS:

#tableDiv {
    margin-left: 40px;
    margin-right: 40px;
    border: 2px solid brown;
    background-color: white;
}

table {
    position: relative;
    width: 100%;
    margin-left: auto;
    margin-right: auto;
    border-color: brown;
}

td, th {
    background-color: #e7e1d3;
    padding: 10px 25px 10px 25px;
    margin: 0px;
}
1
Rick Penabella

Essayez ce qui suit a fonctionné pour moi:

table {
    border-collapse: collapse;
    border: solid #000; 
}

table td {
    border: 1px solid red;
}
0
Ritesh