Appliquer des bordures à une cellule de tableau lors de l'utilisation border-collapse

Question

J'ai une table avec les règles CSS suivantes appliquées:

table { border-collapse: collapse; }
td { border: 2px solid Gray; }

Je veux certaines cellules ont une bordure rouge, au lieu.

td.special { border: 2px solid Red; }

Cela ne fonctionne pas comme je pense. Dans FireFox 3 et IE8, il ressemble à ceci:

_{(source: control-v.net )}

Dans le mode de compatibilité IE7 (Courir dans IE8), il ressemble à ceci:

_{(source: control-v.net )}

Je veux que tous les quatre côtés du <td> être rouge. Comment puis-je faire ceci? Un cas de test est disponible ici.

Answer 1

Il ne sera pas possible avec effondrement des frontières. Vous pouvez contourner le problème un peu si, par exemple en faisant ceci:

<td class="special"><div>Two</div></td>

Ensuite, l'application d'un style comme ceci:

.special div {
    border: 2px solid #f00;
    margin: -2px;
}

Qu'est-ce que (je l'espère) se produira est la div à l'intérieur du td étendra vers l'extérieur par 2 pixels et couvrir la bordure noire avec une bordure rouge.

Answer 2

Il y a un autre poste sur le site je l'ai lu il y a un moment qui résout ce problème grâce, mais je ne pouvais pas le trouver. Quoi qu'il en soit, l'approche était de rendre le double border-style au lieu de solid. Cela fonctionne parce que double a une priorité plus élevée que solide. Sur 1px ou 2px frontières, l'écart entre les doubles lignes ne semble pas parce que les lignes se chevauchent.

table { border-collapse: collapse; }
td { border: 2px solid Gray; }
td.special { border: 2px double Red; }

<table>
    <tr><td>a</td><td>a</td><td>a</td></tr>
    <tr><td>a</td><td class="special">a</td><td>a</td></tr>
    <tr><td>a</td><td>a</td><td>a</td></tr>
</table>

Answer 3

Utilisation des éléments pseudo:

Vous pouvez utiliser un élément pseudo pour y parvenir.

Il suffit de positionner absolument l'élément pseudo relative à l'élément td parent. Faites l'élément pseudo remplir les dimensions entières de l'élément parent, puis ajoutez la frontière à elle.

Exemple ici

table {
    border-collapse: collapse;
}
table td {
    position: relative;
    border: 1px solid #000;
    padding: 2px;
}
table td.selected:after {
    content: '';
    position: absolute;
    top: 0; right: 0;
    bottom: 0; left: 0;
    border: 2px solid red;
}

<table>
    <tr>
        <td>One</td>
        <td>One</td>
        <td>One</td>
    </tr>
    <tr>
        <td>Two</td>
        <td class="selected">Two</td>
        <td>Two</td>
    </tr>
    <tr>
        <td>Three</td>
        <td>Three</td>
        <td>Three</td>
    </tr>
</table>

Answer 4

border-collapse signifie que la TD n'ont pas fait partie de leurs frontières. Vous devez trouver une autre façon de le faire. Donner la table un fond et enlever toutes les frontières, mais en laissant les marges td donne une belle frontière. Ensuite, la mise en frontière donnerait une frontière intérieure, je crois. Est-ce que le travail?