Como criar tabela usando apenas a tag <div> e o Css

182

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.

html  css 
— Kumara
fonte
dê uma olhada neste artigo
— tanathos
32
por que você deseja usar divpara criar uma tabela?
— huy
3
consulte o bom artigo 'As tabelas CSS são melhores que as tabelas HTML?' [ vanseodesign.com/css/tables/]
— vladimir
5
Eu acho que a razão pela qual alguém deseja usar uma tabela baseada em div em vez de uma tabela normal é que ... renderização / animações / reflui em uma tabela baseada em div é realmente mais rápida (especialmente para o tamanho DOM grande) do que renderizar uma tabela normal. ..... veja isso .... stubbornella.org/content/2009/03/27/… isso .... developer.nokia.com/community/wiki/… acima do que todos os plugins javascript intensivos em dados como slickgrid etc use divBasedtable
— bhavya_w 19/09/14
1
@huy Provavelmente porque divs são mais flexíveis que as tabelas!
— Kai Noack

Respostas:

262 
.div-table {
  display: table;         
  width: auto;         
  background-color: #eee;         
  border: 1px solid #666666;         
  border-spacing: 5px; /* cellspacing:poor IE support for  this */
}
.div-table-row {
  display: table-row;
  width: auto;
  clear: both;
}
.div-table-col {
  float: left; /* fix for  buggy browsers */
  display: table-column;         
  width: 200px;         
  background-color: #ccc;  
}

Fragmento executável:

Mostrar snippet de código

— Shiva Komuravelly
fonte
224
Obrigado! Alguém que realmente respondeu à sua pergunta e não apenas disse que "é uma ideia idiota". Eu odeio quando as pessoas não responder às perguntas ... Se ele perguntou isso, deve ser respondida
— Brian Leishman
23
@ stumpx: Às vezes, a resposta correta é "não faça isso". Este é um desses momentos. Quando você precisa perguntar "como faço para criar uma tabela usando divs e CSS", você tem um destes dois problemas: você está fazendo a pergunta errada ou está tentando fazer a coisa errada.
— cHao
28
@cHao Se você acha que essa deve ser a resposta, ignore-a e deixe que alguém que realmente queira responder à pergunta responda.
— 22812 Brian Leishman
14
@ stumpx: Se eu acho que a pergunta não deve ser respondida , voto para fechar - porque a pergunta nem deveria existir. Todas as perguntas válidas merecem uma resposta. Mas, como eu disse, às vezes a resposta mais correta é "não faça". É bom aconselhar alguém sobre como resolver o problema errado? É bom ficar à toa enquanto outros oferecem esse conselho? Eu disse não.
— Chao
5
Se você não sabe o que seu designer tem em mente, ao deixar os dados na estrutura div, como acima, é muito melhor do que deixá-los na tabela. Melhor significa que é mais fácil converter divs flutuantes em tabelas que vice-versa.
— precisa saber é o seguinte
96

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.

— Kobi
fonte
8
pode depender da aplicação. às vezes o que parece tabular pode ser linear, embora dividido. Por exemplo, calendários podem ter seus benefícios como divs em vez de tabelas
— Dan
2
@ Dan: Eles podem ter benefícios como uma lista , mas um monte de divs é semanticamente tão ruim quanto uma tabela de layout.
— cHao
4
existem várias razões pelas quais estamos pedindo que a tabela seja designada com as DIVs. Uma delas é usando a tag tabela no SharePoint 2007 messess-se cada conteúdo que está presente na página
— Shiva Komuravelly
2
@simplyletgo: Semântica, seria mais apropriado estilizar as células da tabela como blocos do que tentar fazer com que os divs agissem como uma tabela.
— cHao 27/02
1
Por que não? se você usar tabelas, não poderá adicionar uma barra de rolagem em torno de determinadas células, para que sua tabela tenha cabeçalhos bloqueados semelhantes ao excel, por exemplo. As tabelas têm muitas limitações. Por que isso não pode ser feito com divs?
— Pilovdzice 24/10/2013
9

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.

  1. Substitua o elemento da tabela por um bloco div (use uma .tableclasse)
  2. Substitua cada elemento tr ou th por um bloco div (use uma .rowclasse)
  3. Substitua cada elemento td por um bloco embutido div (use uma .cellclasse)

.table {display:block; }
.row { display:block;}
.cell {display:inline-block;}
    <h2>Table below using table element</h2>
    <table cellspacing="0" >
       <tr>
          <td>Mike</td>
          <td>36 years</td>
          <td>Architect</td>
       </tr>
       <tr>
          <td>Sunil</td>
          <td>45 years</td>
          <td>Vice President aas</td>
       </tr>
       <tr>
          <td>Jason</td>
          <td>27 years</td>
          <td>Junior Developer</td>
       </tr>
    </table>
    <h2>Table below is using Divs only</h2>
    <div class="table">
       <div class="row">
          <div class="cell">
             Mike
          </div>
          <div class="cell">
             36 years
          </div>
          <div class="cell">
             Architect
          </div>
       </div>
       <div class="row">
          <div class="cell">
             Sunil
          </div>
          <div class="cell">
             45 years
          </div>
          <div class="cell">
             Vice President
          </div>
       </div>
       <div class="row">
          <div class="cell">
             Jason
          </div>
          <div class="cell">
             27 years
          </div>
          <div class="cell">
             Junior Developer
          </div>
       </div>
    </div>
Expandir snippet

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 cellclasse

    cé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;}

— Sunil
fonte
1
Isso não fará isso, pois as colunas não são do mesmo tamanho.
— precisa saber é o seguinte
Você está certo sobre a largura não se comportar como em um elemento da tabela. No entanto, se você especificar uma largura para a classe .cell no CSS, como .cell {width: 300px;}, poderá obter um efeito semelhante. Porém, a limitação que você mencionou sempre estará presente ao usar div, a menos que você defina uma largura para a classe CSS da célula. Outra maneira de obter o mesmo efeito seria usar as seguintes classes: <style> .table {display: table; } .row {display: table-row;} .cell {display: table-cell;} </style> em vez de usar as classes mencionadas na resposta acima.
— Sunil 26/01
@thatsIch, eu adicionei UPDATE 1 na minha resposta que explica a solução alternativa para emissão largura, que você mencionou
— Sunil
2

Use o tipo de documento correto; isso resolverá o problema. Adicione a linha abaixo ao topo do seu arquivo HTML:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
— abcd
fonte
2

Um pouco fora de tópico, mas pode ajudar alguém para um HTML mais limpo ... CSS

.common_table{
    display:table;
    border-collapse:collapse;
    border:1px solid grey;
    }
.common_table DIV{
    display:table-row;
    border:1px solid grey;
    }
.common_table DIV DIV{
    display:table-cell;
    }

HTML

<DIV class="common_table">
   <DIV><DIV>this is a cell</DIV></DIV>
   <DIV><DIV>this is a cell</DIV></DIV>
</DIV>

Funciona no Chrome e Firefox

— Harijs Krūtainis
fonte
2
E se suas células da tabela tiverem <div>elementos? Você provavelmente quer.common_table div > div
— vol7ron
2

Ao 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

<layout-table>
   <layout-header> 
       <layout-column> 1 a</layout-column>
       <layout-column>  </layout-column>
       <layout-column> 3 </layout-column>
       <layout-column> 4 </layout-column>
   </layout-header>

   <layout-row> 
       <layout-column> a </layout-column>
       <layout-column> a 1</layout-column>
       <layout-column> a </layout-column>
       <layout-column> a </layout-column>
   </layout-row>

   <layout-footer> 
       <layout-column> 1 </layout-column>
       <layout-column>  </layout-column>
       <layout-column> 3 b</layout-column>
       <layout-column> 4 </layout-column>
   </layout-footer>
</layout-table>

CSS

layout-table
{
    display : table;
    clear : both;
    table-layout : fixed;
    width : 100%;
}

layout-table:unresolved
{
    color : red;
    border: 1px blue solid;
    empty-cells : show;
}

layout-header, layout-footer, layout-row 
{
    display : table-row;
    clear : both;   
    empty-cells : show;
    width : 100%;
}

layout-column 
{ 
    display : table-column;
    float : left;
    width : 25%;
    min-width : 25%;
    empty-cells : show;
    box-sizing: border-box;
    /* border: 1px solid white; */
    padding : 1px 1px 1px 1px;
}

layout-row:nth-child(even)
{ 
    background-color : lightblue;
}

layout-row:hover 
{ background-color: #f5f5f5 }

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.

— E Net Arch
fonte
Ao utilizar nosso site, você reconhece que leu e compreendeu nossa Política de Cookies e nossa Política de Privacidade.
Licensed under cc by-sa 3.0 with attribution required.