Como remover completamente as bordas da tabela HTML

Meu objetivo é fazer uma página HTML que seja similar a um "foto moldura". Em outras palavras, eu quero fazer uma página em branco que seja rodeada por 4 fotos.

Este é o meu código:

<table>
    <tr>
        <td class="bTop" colspan="3">
        </td>
    </tr>
    <tr>
        <td class="bLeft">
        </td>
        <td class="middle">
        </td>
        <td class="bRight">
        </td>
    </tr>
    <tr>
        <td class="bBottom" colspan="3">
        </td>
    </tr>                                                    
</table>

E as aulas do CSS são as seguintes:

.bTop
{
    width: 960px;
    height: 111px;
    background-image: url('../Images/BackTop.jpg');
}
.bLeft
{
    width: 212px;
    height: 280px;
    background-image: url('../Images/BackLeft.jpg');    

}

.middle
{
    width: 536px;
    height: 280px;
}

.bRight
{
    width: 212px;
    height: 280px;
    background-image: url('../Images/BackRight.jpg');    
}

.bBottom
{        
    width: 960px;
    height: 111px;
    background-image: url('../Images/BackBottom.jpg');       
}

O meu problema é que estou a obter linhas brancas finas entre as células da tabela, quero dizer que a borda das imagens não é contínua. Como posso evitar estes espaços brancos?

Brian Tompsett - 汤莱恩
Pergunta editada :em
Programação
html css html-table background-image
16º abril 2011 в 2:39
3 vistas
Solução
<table cellspacing="0" cellpadding="0">

E na CSS:

table {border: none;}

EDIT: Como iGEL notou, esta solução é oficialmente depreciada (ainda funciona), então se você está começando do zero, você deve ir com a solução jnpcl's border-collapse.

Eu realmente não gosto muito desta mudança até agora (don't trabalhar com tabelas que muitas vezes). Isso torna algumas tarefas um pouco mais complicadas. Por exemplo, quando você quer incluir duas bordas diferentes no mesmo lugar (visualmente), enquanto uma é TOP para uma linha, e a segunda é BOTTOM para outra linha. Elas irão colapsar (= apenas uma delas será mostrada). Então você tem que estudar como é border's "priority" calculado e quais estilos de bordas são "stronger" (double vs. solid etc.).

Eu gostei disto:

<table cellspacing="0" cellpadding="0">
  <tr>
    <td class="first">first row</td>
  </tr>
  <tr>
    <td class="second">second row</td>
  </tr>
</table>

----------

.first {border-bottom:1px solid #EEE;}
.second {border-top:1px solid #CCC;}

Agora, com o colapso da fronteira, isto ganhou't funciona porque há sempre uma fronteira removida. Eu tenho que fazer isso de alguma outra forma (há mais soluções dec). Uma possibilidade é usar o CSS3 com box-shadow:

<table class="tab">
  <tr>
    <td class="first">first row</td>
  </tr>
  <tr>
    <td class="second">second row</td>
  </tr>
</table>​​​


.tab {border-collapse:collapse;}
.tab .first {border-bottom:1px solid #EEE;}
.tab .second {border-top:1px solid #CCC;box-shadow: inset 0 1px 0 #CCC;}​

Você também poderia usar algo como "groove|ridge|inset|outset" estilo de borda com apenas uma borda. Mas para mim, isto não é o ideal, porque eu posso't controlar ambas as cores.

Talvez haja uma solução simples e agradável para o colapso das fronteiras, mas eu ainda não vi e honestamente não passei muito tempo com ela... Talvez alguém aqui seja capaz de me mostrar ;)

Damb
Resposta editada :em
Comentários (2)
 
table {
    border-collapse: collapse;
}
Aruna Herath
Resposta editada :em
Comentários (0)

Para mim, eu precisava fazer algo assim para remover completamente as bordas da mesa e todas as células. Isto não requer a modificação do HTML de forma alguma, o que foi útil no meu caso.

table, tr, td {
    border: none;
}
Comentários (1)