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
fonte
Respostas:
Se você está fazendo o que acredito que está tentando fazer, precisará de algo um pouco mais como este:
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.
fonte
isso funciona para mim:
ver exemplo ...
testado no FF 3.6 e no Chromium 5.0, o IE não possui suporte; do W3C :
fonte
Exemplo de uma maneira muito simples de obter o efeito desejado:
fonte
frame
erules
são atributos OLD (não HTML5)table
(você deve usar CSS).frame
diz que partes de fora bordas da tabela deve ser visível -void
meios esconder todas as fronteiras externas ...rules
diz que partes do interior bordas da tabela deve ser visível -all
significa que todos eles ... obviamente ... Por favor, não use este, a menos que você são HTML3 fanático ... :)Devido à compatibilidade com ie7, ie8, sugiro usar o primeiro filho e não o último filho para fazer isso:
Você pode aprender sobre as pseudo-classes CSS 2.1 em: http://msdn.microsoft.com/en-us/library/cc351024(VS.85).aspx
fonte
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:
Para suporte ao IE 7, adicione este:
Um caso de teste pode ser visto aqui: http://codepen.io/dalgard/pen/wmcdE
fonte
isso deve funcionar:
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:
fonte
isso fará tudo sem css
<TABLE BORDER=1 RULES=ALL FRAME=VOID>
código de: HTML CODE TUTORIAL
fonte
Adicione a borda a cada célula com isso:
Remova a borda superior de todas as células na primeira linha:
Remova a borda esquerda das células na primeira coluna:
Remova a borda direita das células na última coluna:
Remova a borda inferior das células na última linha:
http://jsfiddle.net/hzru0ytx/
fonte
Funciona para qualquer combinação de tbody / thead / tfoot e td / th
fonte