Question

我想仅使用<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及以下版本。请给我你的解决方案和想法。感谢。

Answer 1

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

Runnable片段：

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

<body>
  <form id="form1">
      <div class="div-table">
             <div class="div-table-row">
                <div class="div-table-col" align="center">Customer ID</div>
                <div  class="div-table-col">Customer Name</div>
                <div  class="div-table-col">Customer Address</div>
             </div>
            <div class="div-table-row">
                  <div class="div-table-col">001</div>
                <div class="div-table-col">002</div>
                <div class="div-table-col">003</div>
            </div>
            <div class="div-table-row">
                <div class="div-table-col">xxx</div>
                <div class="div-table-col">yyy</div>
                <div class="div-table-col">www</div>
           </div>
            <div class="div-table-row">
                <div class="div-table-col">ttt</div>
                <div class="div-table-col">uuu</div>
                <div class="div-table-col">Mkkk</div>
           </div>

      </div>
  </form>
</body>

Answer 2

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

Answer 3

这是一个老线程，但我想我应该发布我的解决方案。我最近遇到了同样的问题，我解决它的方法是遵循三步法，如下所述，这是非常简单的，没有任何复杂的CSS 。

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

三步简单方法

对于仅包含div的表，以便像在表元素中一样获取单元格和行，请使用以下方法。

用块div替换表元素（使用.table类）
用块div替换每个tr或th元素（使用.row类）
用内联块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类
的宽度
cell {display：inline-block;宽度：340px;}
使用现代浏览器的CSS，如下所示。

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

Answer 4

如果您不喜欢<table>中的任何内容，也许您可以使用reset file？

或

如果您需要这个页面布局，请查看cssplay layout examples以设计没有表格的网站。

Answer 5

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

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

Answer 6

考虑到Grid-Css，我看不到任何答案。我认为这是一种非常优雅的方法：grid-css甚至支持行跨度和列跨度。在这里您可以找到一篇很好的文章：

https://medium.com/@js_tut/css-grid-tutorial-filling-in-the-gaps-c596c9534611

Answer 7

有点OFF-TOPIC，但可以帮助某人获得更清晰的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

Answer 8

在构建一组自定义布局标签时，我找到了另一个解决此问题的方法。这里提供了自定义标记集及其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。 Border也会做同样的事情，但在行中创建一条线。填充没有。而且，虽然我没有尝试过，但我认为Margin的行为方式与Padding相同，强制和空单元格正确呈现。

如何使用<div>标签和Css </div>创建表

8 个答案: