Eu quero criar tabela usando apenas <div>tag e CSS.
Esta é a minha tabela de amostra.
<body>
<form id="form1">
<div class="divTable">
<div class="headRow">
<div class="divCell" align="center">Customer ID</div>
<div class="divCell">Customer Name</div>
<div class="divCell">Customer Address</div>
</div>
<div class="divRow">
<div class="divCell">001</div>
<div class="divCell">002</div>
<div class="divCell">003</div>
</div>
<div class="divRow">
<div class="divCell">xxx</div>
<div class="divCell">yyy</div>
<div class="divCell">www</div>
</div>
<div class="divRow">
<div class="divCell">ttt</div>
<div class="divCell">uuu</div>
<div class="divCell">Mkkk</div>
</div>
</div>
</form>
</body>
E estilo:
<style type="text/css">
.divTable
{
display: table;
width:auto;
background-color:#eee;
border:1px solid #666666;
border-spacing:5px;/*cellspacing:poor IE support for this*/
/* border-collapse:separate;*/
}
.divRow
{
display:table-row;
width:auto;
}
.divCell
{
float:left;/*fix for buggy browsers*/
display:table-column;
width:200px;
background-color:#ccc;
}
</style>
Mas esta tabela não funciona com o IE7 e a versão abaixo. Forneça sua solução e idéias para mim. Obrigado.
divpara criar uma tabela?divs são mais flexíveis que as tabelas!Respostas:
Fragmento executável:
Mostrar snippet de código
fonte
divs não deve ser usado para dados tabulares. Isso é tão errado quanto usar tabelas para o layout.Use a
<table>. É fácil, semanticamente correto, e você estará pronto em 5 minutos.fonte
Este é um tópico antigo, mas achei que deveria postar minha solução. Enfrentei o mesmo problema recentemente e a maneira como o resolvi é seguindo uma abordagem de três etapas, conforme descrito abaixo, que é muito simples sem nenhum CSS complexo .
(NOTA: Obviamente, para navegadores modernos, o uso dos valores de tabela ou linha de tabela ou célula de tabela para o atributo CSS de exibição resolveria o problema. Mas a abordagem que eu usei funcionará igualmente bem em navegadores modernos e antigos, pois não use esses valores para exibir o atributo CSS.)
ABORDAGEM SIMPLES EM 3 PASSOS
Para tabela com divs apenas para obter células e linhas como em um elemento da tabela, use a seguinte abordagem.
.tableclasse).rowclasse).cellclasse)ATUALIZAÇÃO 1
Para contornar o efeito de a mesma largura não ser mantida em todas as células de uma coluna, conforme mencionado
thatslchem um comentário, é possível adotar uma das duas abordagens abaixo.Especifique uma largura para a
cellclassecélula {display: bloco embutido; largura: 340px;}
Use CSS de navegadores modernos como abaixo.
.table {display: tabela; } .row {exibição: linha da tabela;} .célula {exibição: célula da tabela;}
fonte
Se houver algo que
<table>você não goste, talvez você possa usar o arquivo de redefinição ?ou
se você precisar disso para o layout da página, consulte os exemplos de layout do cssplay para criar sites sem tabelas.
fonte
Não vejo nenhuma resposta considerando o Grid-CSS. Eu acho que é uma abordagem muito elegante: o grid-css suporta até o intervalo de linhas e os intervalos de coluna. Aqui você pode encontrar um artigo muito bom:
https://medium.com/@js_tut/css-grid-tutorial-filling-in-the-gaps-c596c9534611
fonte
Use o tipo de documento correto; isso resolverá o problema. Adicione a linha abaixo ao topo do seu arquivo HTML:
fonte
Um pouco fora de tópico, mas pode ajudar alguém para um HTML mais limpo ... CSS
HTML
Funciona no Chrome e Firefox
fonte
<div>elementos? Você provavelmente quer.common_table div > divAo criar um conjunto personalizado de tags de layout, encontrei outra resposta para esse problema. Aqui é fornecido o conjunto personalizado de tags e suas classes CSS.
HTML
CSS
A chave para obter células vazias e células em geral para o tamanho certo é o tamanho da caixa e o preenchimento. A borda também fará a mesma coisa, mas cria uma linha na linha. Preenchimento não. E, embora eu não tenha tentado, acho que o Margin funcionará da mesma maneira que o Padding, forçando e a célula vazia a ser renderizada corretamente.
fonte