Aplicando fronteiras para uma única célula da tabela ao usar border-collapse

Question

Eu tenho uma tabela com as seguintes regras CSS aplicados:

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

Eu quero que certas células para ter uma borda vermelha, em vez disso.

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

Esta não funciona como eu esperava. No Firefox 3 e IE8 parece que isso:

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

No modo IE7 compatibilidade (Correndo em IE8), parece que isso:

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

Eu quero que todos os quatro lados do <td> a ser vermelho. Como posso fazer isso? caso Um teste pode ser encontrada aqui.

Answer 1

Não será possível usar border-collapse. Você pode contornar o problema um pouco, porém, por exemplo, ao fazer isso:

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

Depois de aplicar um estilo parecido com isto:

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

O que (espero) vai acontecer é a div dentro do td irá se expandir por 2 pixels e cobrir a borda preta com uma borda vermelha.

Answer 2

Há um outro post no site eu li um tempo atrás que graciosamente resolve este problema, mas eu não poderia encontrá-lo. De qualquer forma, a abordagem era fazer o double border-style em vez de solid. Isso funciona porque casal tem uma prioridade maior do que sólida. Em 1px ou 2px fronteiras, o espaço entre as linhas duplas não aparecer porque as linhas se sobrepõem.

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

Usando pseudo elementos:

Você pode usar um elemento pseudo para alcançar este objectivo.

Apenas absolutamente posicionar o elemento pseudo relação para o elemento td pai. Faça o elemento pseudo preencher as dimensões inteiras do elemento pai, e depois adicionar o limite para ele.

Exemplo Aqui

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

meios border-colapso da TD não realmente ter algumas de suas fronteiras. Você terá que encontrar outra maneira de fazê-lo. Dando a mesa um fundo e tirar todas as fronteiras, mas deixando as margens td dá uma borda agradável. Em seguida, definindo uma borda daria uma fronteira interna, creio eu. Será que isso funciona?