Ir para conteúdo

POWERED BY:

Arquivado

Este tópico foi arquivado e está fechado para novas respostas.

TeixeiraRamos

[Resolvido] Espaço entre bordas na tabela

Por , em Desenvolvimento frontend

Recommended Posts

TeixeiraRamos    4

TeixeiraRamos
Postado

Tabela tem conexão com um banco de dados.

Estou usando propriedade abaixo na minha tabela e continuo com as bordas separadas e além disso na css fica sublinha indicando que tem erro. Existe outra saída para juntar a bordas de uma tabela?

 

border-collapse:collapse;

 

 

Outro coisa, como fazer com que a tabela fique zebrada? Ela é dinamica e não tenho como indicar que a linha tal vai se da cor cinza e a outra branca. Tem como fazer isso em tabala dinamica?

Compartilhar este post

Link para o post
Compartilhar em outros sites

Evandro Oliveira    331

Evandro Oliveira
Postado

existem duas propriedades da tabela que não podem ser manipuladas via CSS

 

<table cellpadding="0" cellspacing="0" class="tabela">

 

cellpadding define o espaçamento interno padrão de cada célula, é equivalente a

th, td { padding: 0 }

mas DEVE ser definido, e o padding ser manipulado pelo CSS

 

o mesmo para cellspacing, que define o espaçamento ENTRE células e é equivalente a

th, td { margin: 0 }

Defina como 0 e manipule os espaçamentos via CSS também.

 

Além disso, mantenha o border-collapse, a nível de tabela

.tabela { border: 1px solid #000; border-collapse: collapse; }

quanto à tabela zebrada:

 

Suportando apenas navegadores decentes:

.tabela tbody tr:nth-child(odd){ background: #CCC; }

Suportando todos os navegadores com ajuda de jQuery

$('.tabela tbody tr:nth-child(odd)').css('background','#CCC');

Renderizando a tabela já marcada via server-side (PHP)

foreach($linha_da_tabela = 1; $linha_da_tabela < $total_de_linhas; $linha_da_tabela++){
   $classe = ($linha_da_tabela % 2 == 0)? 'branco':'cinza';
   echo <<<html
   <td class="{$classe}">Conteúdo da célula</td>\n
html;
}

 

Se estiver utilizando ASP, JSP ou outra linguagem, abra um novo tópico na sessão apropriada dentro do subfórum da linguagem desejada.

Compartilhar este post

Link para o post
Compartilhar em outros sites

TeixeiraRamos    4

TeixeiraRamos
Postado

Com relação a juntar as bordas ok. Ficou muito bom!

Agora zebrar não consegui desenvolver. Sou muito novo em CSS é a primeira que estou fazendo com as orintações do forum e com livros. Mas tem muitas coisas que ainda não consigo.

Muito brigado.

Compartilhar este post

Link para o post
Compartilhar em outros sites

TeixeiraRamos    4

TeixeiraRamos
Postado

Estou usando th e caption (usei devido estudos através do livro "Use a Cabeça" - página 499) coloquei na table, ficou uma espécie de título da tabela. Gostei, ficou legal.

Agora tbody estou usando agora devido seu exemplo. Coloquei antes da primeira tr e fechei antes de </table>.

Coloquei na css:

.tabela tbody tr:nth-child(odd){ background: #CCC; }

 

Mas nada aconteceu e sublinhou tudo.

 

Você deve está se referindo ao uso do DW para construir a CSS não é?

Por, tudo bem, estou errado. Outros aqui já falaram para não usar, alguns livros também orintam isso mas acho bem melhor.

Se eu não fizer pelo DW fica pior. Estou aprendendo(acho)mesmo fazendo pelo DW.

Mas valeu a orintação.

Gostaria muito de aprender a fazer a tabela zebrada e você colocou aqui mas não consegui alcançar.

Compartilhar este post

Link para o post
Compartilhar em outros sites

Evandro Oliveira    331

Evandro Oliveira
Postado

Utilizando o DW em modo código, não vejo absolutamente nada contra. Mas não se prenda ao visualizador interno dele. Tenha em mente que ninguém navega no seu site utilizando Dreamweaver. Clique em "Code" esconda o painel visual e seja feliz, excelente ferramenta e deve sim ser utilizada, desde que corretamente.

 

sua tabela deve estar neste formato aqui, né?

 

<table cellpadding="0" cellspacing="0" summary="sumário da tabela" class="tabela">
   <caption>Tabela padrão</caption>
   <thead>
       <tr>
           <th class="grande">Nome</th>
           <th>Idade</th>
       </tr>
   </thead>
   <tbody>
       <tr>
           <td>João</td>
           <td>20</td>
       </tr>
       <tr>
           <td>Mariazinha</td>
           <td>18</td>
       </tr>
       <tr>
           <td>Joaquina</td>
           <td>19</td>
       </tr>
       <tr>
           <td>Faustão</td>
           <td>60</td>
       </tr>
       <tr>
           <td>Dercy</td>
           <td>200</td>
       </tr>
   </tbody>
</table>

 

.tabela { border: 1px solid #000; }
.tabela tbody tr:nth-child(odd) { background: #CCC; }
.tabela .grande { width: 200px; }

resultado:

Imagem Postada

 

 

Como eu disse, esse modo só funciona para navegadores de verdade. Se você quiser que funcione no Internet Explorer, pode aprender como se usa jQuery e utilizar o código que te passei.

Compartilhar este post

Link para o post
Compartilhar em outros sites

TeixeiraRamos    4

TeixeiraRamos
Postado

Vou trabalhar tudo agora mesmo.

Dou um retorno.

Meu navegador é o Firefox orientado pela equipe do deste forum.

Se eu soubesse antes não teria nem visto o EI.

Que diferença para melhor o Firefox!

Obrigado mesmo.

 

Digitei na minha CSS conforme você orientou.

A minha th já está com uma class e fiquei com dúvida o que fazer e mantive como estava.

Não indiquie a tag <thead> </thead> pois indicando some o zebrado. Deve ser alguma bobagem que andei fazendo.

Mas deu certo só indiquei na table assim:

<table class="tabela">

 

Coloquei no Firefox a menina ficou linda. Conforme eu pensava.

 

Mas como nem tudo é flores, devo ter colocado algo errado eu não sei se pode ficar assim mesmo ou tem que ser resolvido. Está da forma que eu queria.

Porém fui lá no dedo duro, ou seja, no W3C e madei validar. Veja, por favor, a informação do erro:

Pseudo-elemento ou pseudo classe :nth-child desconhecido

 

E essa está sublinhada na minha CSS.

 

Na css onde consta

.tabela tbody tr:nth-child(odd){

background:#CCC;

}

 

E

border-collapse:collapse;

 

Ficam sublinhados na CSS.

Também está sublinhada o nome da CSS na página ".asp".

Tem problema ficar dessa forma?

E como está funcionado mesmo indicando erro W3C?

É mole? Agora que a tabela está como eu queria aparece erro no W3C?

 

Todo o site funciona nos dois Firefox e EI 8 exceto o tabela zebrada, conforme você previu.

Compartilhar este post

Link para o post
Compartilhar em outros sites

Evandro Oliveira    331

Evandro Oliveira
Postado

nth-child, apesar de largamente implementada, é considerada uma regra de nível 3 (CSS3). Não vai validar mesmo.

 

Agora considere somente o corretor do Dreamweaver para Javascript e HTML (desde que declarado o doctype correto).

Compartilhar este post

Link para o post
Compartilhar em outros sites
Ir para a lista de tópicos Desenvolvimento frontend
×

Informação importante

Ao usar o fórum, você concorda com nossos Termos e condições.

  Aceito