Como posso aplicar uma borda somente dentro de uma tabela?

195

Estou tentando descobrir como adicionar borda apenas dentro da tabela. Quando eu faço:

table {
    border: 0;
}
table td, table th {
    border: 1px solid black;
}

A borda está ao redor de toda a tabela e também entre as células da tabela. O que eu quero alcançar é ter borda somente dentro da tabela em torno das células da tabela (sem borda externa ao redor da tabela).

Aqui está a marcação que estou usando para tabelas (apesar de achar que isso não é importante):

<table>
    <tr>
        <th>Heading 1</th>
        <th>Heading 2</th>
    </tr>
    <tr>
        <td>Cell (1,1)</td>
        <td>Cell (1,2)</td>
    </tr>
    <tr>
        <td>Cell (2,1)</td>
        <td>Cell (2,2)</td>
    </tr>
    <tr>
        <td>Cell (3,1)</td>
        <td>Cell (3,2)</td>
    </tr>
</table>

E aqui estão alguns estilos básicos que aplico à maioria das minhas tabelas:

table {
    border-collapse: collapse;
    border-spacing: 0;
}
html css html-table border Richard Knop
fonte
Eu vejo apenas bordas apenas ao redor das células. Como cada uma das células possui uma borda, parece que a tabela possui uma borda. Talvez eu não entenda a pergunta?
Chetan S
3
Também chamado de fronteiras internas .
Caracol mecânico

Respostas:

203

Se você está fazendo o que acredito que está tentando fazer, precisará de algo um pouco mais como este:

table {
  border-collapse: collapse;
}
table td, table th {
  border: 1px solid black;
}
table tr:first-child th {
  border-top: 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:last-child,
table tr th:last-child {
  border-right: 0;
}

jsFiddle Demo

O problema é que você está definindo uma 'borda completa' ao redor de todas as células, o que faz parecer que você tem uma borda ao redor de toda a tabela.

Felicidades.

EDIT: Um pouco mais de informações sobre essas pseudo-classes podem ser encontradas no modo quirks e, como era de se esperar, você é basicamente o SOL em termos de suporte ao IE.

theIV
fonte
Com tabelas simples como essa, há uma solução muito mais curta que evita o uso de pseudo-classes usando o próximo combinador de irmãos. Veja minha resposta.
Dalgard
1
@theIV, com isso respondido há mais de 5 anos, existe alguma maneira 'nova' / 'mais eficiente' disso?
precisa
Não funcionará se você usar linhas de linha na primeira coluna de uma tabela.
Jack
191

isso funciona para mim:

table {
    border-collapse: collapse;
    border-style: hidden;
}

table td, table th {
    border: 1px solid black;
}

ver exemplo ...

testado no FF 3.6 e no Chromium 5.0, o IE não possui suporte; do W3C :

As fronteiras com o 'estilo de borda' de 'oculto' têm precedência sobre todas as outras fronteiras conflitantes. Qualquer borda com esse valor suprime todas as bordas neste local.

anthonyrisinger
fonte
1
Contanto que você não precise de uma borda da tabela, essa é definitivamente a solução mais elegante.
cjroth
42

Exemplo de uma maneira muito simples de obter o efeito desejado:

<table border="1" frame="void" rules="all">
    <tr>
        <td>1111</td>
        <td>2222</td>
        <td>3333</td>
    </tr>
    <tr>
        <td>4444</td>
        <td>5555</td>
        <td>6666</td>
    </tr>
</table>
jony
fonte
13
"MAGIC" EXPLICADO: frame e rulessão atributos OLD (não HTML5) table (você deve usar CSS). framediz que partes de fora bordas da tabela deve ser visível - voidmeios esconder todas as fronteiras externas ... rulesdiz que partes do interior bordas da tabela deve ser visível - allsignifica que todos eles ... obviamente ... Por favor, não use este, a menos que você são HTML3 fanático ... :)
jave.web
1
Adicionando algo como borda: 1px preto sólido garantirá que o limite externo da tabela obtenha uma borda.
Aaron Liu
1
Trabalhei como um encanto em 2020 para adicionar rapidamente alguma legibilidade a uma tabela ridiculamente espaçada em um site que eu estava lendo. Na verdade, apenas isso foi suficiente para as fronteiras internas: rules = "all"
Edoardo Facchinelli
11

Devido à compatibilidade com ie7, ie8, sugiro usar o primeiro filho e não o último filho para fazer isso:

table tr td{border-top:1px solid #ffffff;border-left:1px solid #ffffff;}

table tr td:first-child{border-left:0;}

table tr:first-child td{border-top:0;}

Você pode aprender sobre as pseudo-classes CSS 2.1 em: http://msdn.microsoft.com/en-us/library/cc351024(VS.85).aspx

Crisboot
fonte
Esta é uma otima soluçao. Mas cuidado, se você tiver outra tabela em um de seus células da tabela e querem ver as fronteiras internas você precisa de outro conjunto de linhas de CSS para a sua mesa "interior"
Michael Biermann
10

Para marcação de tabela comum, aqui está uma solução curta que funciona em todos os dispositivos / navegadores no BrowserStack, exceto no IE 7 e abaixo:

table { border-collapse: collapse; }

td + td,
th + th { border-left: 1px solid; }
tr + tr { border-top: 1px solid; }

Para suporte ao IE 7, adicione este:

tr + tr > td,
tr + tr > th { border-top: 1px solid; }

Um caso de teste pode ser visto aqui: http://codepen.io/dalgard/pen/wmcdE

Dalgard
fonte
Ótimo - pois isso também permite definir uma borda diferente para a mesa, melhor do que simplesmente não exibi-la.
jsbueno
5

isso deve funcionar:

table {
 border:0;
}

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

editar:

Eu apenas tentei, sem borda da tabela. mas se eu definir uma borda da tabela, ela será eliminada pelo colapso da borda.

este é o arquivo de teste:

<html>
<head>
<style type="text/css">
table {
    border-collapse: collapse;
    border-spacing: 0;
}


table {
    border: 0;
}
table td, table th {
    border: 1px solid black;
}


</style>
</head>
<body>
<table>
    <tr>
        <th>Heading 1</th>
        <th>Heading 2</th>
    </tr>
    <tr>
        <td>Cell (1,1)</td>
        <td>Cell (1,2)</td>
    </tr>
    <tr>
        <td>Cell (2,1)</td>
        <td>Cell (2,2)</td>
    </tr>
    <tr>
        <td>Cell (3,1)</td>
        <td>Cell (3,2)</td>
    </tr>
</table>

</body>
</html>
Rufinus
fonte
Não, isso não funcionou, eu tentei isso. Vou editar meu primeiro post.
Richard Knop
0

Adicione a borda a cada célula com isso:

table > tbody > tr > td { border: 1px solid rgba(255, 255, 255, 0.1); }

Remova a borda superior de todas as células na primeira linha:

table > tbody > tr:first-child > td { border-top: 0; }

Remova a borda esquerda das células na primeira coluna:

table > tbody > tr > td:first-child { border-left: 0; }

Remova a borda direita das células na última coluna:

table > tbody > tr > td:last-child { border-right: 0; }

Remova a borda inferior das células na última linha:

table > tbody > tr:last-child > td { border-bottom: 0; }

http://jsfiddle.net/hzru0ytx/

Brian
fonte
0

Funciona para qualquer combinação de tbody / thead / tfoot e td / th

table.inner-border {
    border-collapse: collapse;
    border-spacing: 0;
}

table.inner-border > thead > tr > th,
table.inner-border > thead > tr > td,
table.inner-border > tbody > tr > th,
table.inner-border > tbody > tr > td,
table.inner-border > tfoot > tr > th,
table.inner-border > tfoot > tr > td {
    border-bottom: 1px solid black;
    border-right: 1px solid black;
}

table.inner-border > thead > tr > :last-child,
table.inner-border > tbody > tr > :last-child,
table.inner-border > tfoot > tr > :last-child {
    border-right: 0;
}

table.inner-border > :last-child > tr:last-child > td,
table.inner-border > :last-child > tr:last-child > th {
    border-bottom: 0;
}
<table class="inner-border">
    <thead>
    <tr>
        <th>head1,1</th>
        <td>head1,2</td>
        <td>head1,3</td>
    </tr>
    <tr>
        <td>head2,1</td>
        <td>head2,2</td>
        <th>head2,3</th>
    </tr>
    </thead>
    <tr>
        <td>1,1</td>
        <th>1,2</th>
        <td>1,3</td>
    </tr>
    <tr>
        <td>2,1</td>
        <td>2,2</td>
        <td>2,3</td>
    </tr>
    <tr>
        <td>3,1</td>
        <td>3,2</td>
        <td>3,3</td>
    </tr>
    <thead>
    <tr>
        <th>foot1,1</th>
        <td>foot1,2</td>
        <td>foot1,3</td>
    </tr>
    <tr>
        <td>foot2,1</td>
        <th>foot2,2</th>
        <th>foot2,3</th>
    </tr>
    </thead>
</table>
Expandir snippet

user1119279
fonte