Aplicar bordes a una única celda de la tabla cuando se utiliza border-collapse

Question

Tengo una tabla con las siguientes reglas CSS aplicados:

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

quiero ciertas células que tienen un borde rojo, en su lugar.

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

Esto no funciona como yo esperaría. En Firefox 3 e IE8 se ve así:

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

En el modo de compatibilidad de Internet Explorer 7 (Correr en IE8) que se parece a esto:

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

Quiero que todos los cuatro lados de la <td> a ser de color rojo. ¿Cómo puedo hacer esto? Un caso de prueba se puede encontrar aquí.

Answer 1

No será posible utilizando border-collapse. Se podría solucionar el problema un poco, sin embargo, por ejemplo, al hacer esto:

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

A continuación, aplicar un estilo de esta manera:

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

Lo que (esperemos) que va a pasar es el div dentro de la TD se expandirá hacia afuera por 2 píxeles y para abarcar la frontera negro con un borde rojo.

Answer 2

Hay otro post en el sitio que leí hace un tiempo que resuelve este problema con gracia, pero no pude encontrarlo. De todos modos, el enfoque era hacer que el double-estilo de borde en lugar de solid. Esto funciona porque doble tiene una prioridad más alta que sólido. En 1px o 2px fronteras, el espacio entre las líneas dobles no aparece porque las líneas se superponen.

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

Uso de pseudo elementos:

Puede utilizar un elemento seudo para lograrlo.

Sólo la posición absoluta del elemento seudo relativa para el elemento td padres. Hacer que el elemento seudo llenar las dimensiones completas del elemento padre, y luego agregar el borde de la misma.

Ejemplo Aquí

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

significa border-collapse el TD de realidad no tienen algunos de sus fronteras. Vas a tener que encontrar alguna otra manera de hacerlo. Dando a la mesa de un fondo y quitando todas las fronteras, pero dejando los márgenes td da un buen frontera. A continuación, el establecimiento de una frontera daría una frontera interior, creo. Habría que trabajar?