如何仅使用<div>标签和CSS创建表

182

我只想使用<div>标签和CSS 创建表。

这是我的样本表。

<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>

和风格：

<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>

但是此表不适用于IE7及以下版本。请为我提供您的解决方案和想法。谢谢。

html  css 
— 库马拉
source
看一下这篇文章
— tanathos
32
为什么要使用div创建表？
— 伊
3
看到好的文章“ CSS表比HTML表好吗？” [ vanseodesign.com/css/tables/]
— vladimir
5
我认为任何人都想使用基于div的表而不是普通表的原因是....基于div的表的呈现/动画/重排实际上比呈现普通表要快（尤其是对于较大的DOM大小）。 .....参见此.... stubbornella.org/content/2009/03/27/…此.... developer.nokia.com/community/wiki/…以上是所有数据密集型javascript插件，例如slickgrid等使用divBasedtable
— bhavya_w
1
@huy可能是因为divs 比表更灵活！
— Kai Noack

Answers:

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

可运行的代码段：

显示代码段

— 希瓦·科穆拉韦利（Shiva Komuravelly）
source
223
谢谢！确实回答了他的问题而不仅仅是说“这是一个愚蠢的主意”的人。当人们不回答问题时，我讨厌它。。。如果他问，应该回答
— Brian Leishman 2012年
23
@stumpx：有时候正确的答案是“不要那样做”。这是那些时代之一。当您不得不问“我如何使用div和CSS制作表”时，您会遇到两个问题之一：您问的是错误的问题，或者您尝试做的是错误的事情。
— cHao 2012年
28
@cHao如果您认为这应该是答案，请忽略它，让真正想回答该问题的人回答。
— Brian Leishman 2012年
14
@stumpx：如果我认为不应该回答这个问题，我投票结束-因为这个问题甚至都不存在。所有有效的问题都应该得到答案。但是就像我说的那样，有时最正确的答案是“不要这样做”。建议某人解决错误的问题好吗？在其他人提供此类建议时袖手旁观是否很好？我拒绝。
— cHao 2012年
5
如果您不知道设计师的想法，那么像上面那样将数据保留在div结构中比将数据保留在表中要好得多。更好意味着从浮动div转换为相反的表更容易。
— anatoly techtonik 2013年
96

div不应用于表格数据。这与使用表进行布局一样错误。
使用<table>。它很简单，从语义上讲是正确的，您将在5分钟内完成。

— 科比
source
8
可以取决于应用程序。有时，表格显示的内容可能是线性的，尽管分裂了。例如，日历可以将其作为div而不是表格来发挥作用
— Dan
2
@Dann：它们可能有一个list的好处，但是一堆div在语义上与布局表一样糟糕。
— cHao 2012年
4
我们要求将表格与DIV分开的原因有很多。其中之一就是在SharePoint 2007中使用表格标记来弄乱页面中存在的所有内容
— Shiva Komuravelly
2
@simplyletgo：从语义上讲，将表格单元格设置为块比将div用作表格更合适。
— cHao
1
为什么不？如果您使用表格，则无法在某些单元格周围添加滚动条，以使表格具有类似于excel的锁定标题。表有很多限制，为什么div不能做到这一点？
— pilavdzice
9

这是一个旧线程，但我认为我应该发布解决方案。我最近遇到了同样的问题，而解决问题的方法是遵循以下概述的三步法，这种方法非常简单，没有任何复杂的CSS。

（注意：当然，对于现代浏览器，使用table或table-row或table-cell的值来显示CSS属性可以解决此问题。但是我使用的方法在现代和较旧的浏览器中同样适用，因为它不能将这些值用于显示CSS属性。）

三步简单方法

仅对于具有div的表，这样您就可以像表元素中那样获得单元格和行，请使用以下方法。

  1. 用block div替换表元素（使用 .table类）
  2. 将每个tr或th元素替换为一个div块（使用一个.row类）
  3. 用内联块div替换每个td元素（使用.cell类）

.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>
展开摘要

更新1

为了避免thatslch注释中提到的在列的所有单元格上不保持相同宽度的影响，可以采用以下两种方法之一。

  • 指定cell班级的宽度

    单元格{display：inline-block; 宽度：340像素；}

  • 如下使用现代浏览器的CSS。

    .table {display：table; } .row {display：table-row;} .cell {display：table-cell;}

— 苏尼尔
source
1
因为列的大小不同，所以不会这样做。
— thatsIch
您是正确的，宽度不像表格元素那样宽。但是，如果在CSS中为.cell类指定宽度，例如.cell {width：300px;}，则可以实现类似的效果。但是，除非您为单元CSS类定义宽度，否则使用div时，您提到的限制将始终存在。获得相同效果的另一种方法是使用以下类：<style> .table {display：table; } .row {display：table-row;} .cell {display：table-cell;} </ style>而不是使用上面答案中提到的类。
— Sunil
@thatsIch，我在答案中添加了UPDATE 1，该解释说明了您提到的宽度问题的解决方法
— Sunil
2

使用正确的文档类型；它将解决问题。将以下行添加到HTML文件的顶部：

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
— A B C D
source
2

有点离题，但可能会帮助某人获得更干净的HTML ... 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>

适用于Chrome和Firefox

— 哈里斯·克鲁坦尼斯
source
2
如果您的表格单元格中包含<div>元素？您可能想要.common_table div > div
— vol7ron
2

在构建一组自定义的布局标签时，我找到了这个问题的另一个答案。这里提供了自定义的标记集及其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 }

使空单元格和单元格通常具有正确大小的关键是Box-Sizing和Padding。边框也会做同样的事情，但是会在行中创建一条线。填充没有。而且，尽管我还没有尝试过，但我认为Margin的行为与Padding相同，可以强制正确渲染空白单元格。

— E网拱
source
By using our site, you acknowledge that you have read and understand our Cookie Policy and Privacy Policy.
Licensed under cc by-sa 3.0 with attribution required.