如何仅使用 <div> 标签和 Css 创建表答案

【问题标题】：How create table only using <div> tag and Css如何仅使用 <div> 标签和 Css 创建表
【发布时间】：2011-03-04 10:49:13
【问题描述】：

我只想使用<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 及以下版本。请为我提供您的解决方案和想法。谢谢。

【问题讨论】：

为什么要用div建表？
您可能需要注意的一件事是您的 class="headRow" 在 CSS 中定义为 .divRow。只是想我会指出这一点。
我认为任何人想要使用基于 div 的表而不是普通表的原因是......基于 div 的表上的渲染/动画/重排实际上更快（尤其是对于大型 DOM大小）而不是渲染一个普通的表格......见这个......stubbornella.org/content/2009/03/27/…这个......developer.nokia.com/community/wiki/…上面所有的数据密集型javascript插件如slickgrid等都使用divBasedtable
只是一个小修正：display:table-column 应该用来模仿<col> 标签，模仿<td> 使用display: table-cell
另一个更正：如果您的表格不适合屏幕，那么您的单元格将换行。原因：float: left 是罪魁祸首。另见：stackoverflow.com/questions/30001848/…

标签： html css

【解决方案1】：

它对我有用，它有助于创建响应式表格，有关更多信息，请访问此网站：https://wisdmlabs.com/blog/responsive-tables-using-css-div-tag/

#resp-table {
        width: 100%;
        display: table;
    }
    #resp-table-body{
        display: table-row-group;
    }
    .resp-table-row{
        display: table-row;
    }
    .table-body-cell{
        display: table-cell;
        border: 1px solid #dddddd;
        padding: 8px;
        line-height: 1.42857143;
        vertical-align: top;
    }

<div id="resp-table">
    <div id="resp-table-body">
        <div class="resp-table-row"> 
            <div class="table-body-cell">
                col 1 
            </div>
            <div class="table-body-cell">
                col 2 
            </div>
            <div class="table-body-cell">
                col 3 
            </div>
            <div class="table-body-cell">
                col 4 
            </div>
        </div>
        <div class="resp-table-row"> 
            <div class="table-body-cell">
                second row col 1 
            </div>
            <div class="table-body-cell">
                second row col 2 
            </div>
            <div class="table-body-cell">
                second row col 3 
            </div>
            <div class="table-body-cell">
                second row col 4 
            </div>
        </div>
    </div>
</div>

【讨论】：

【解决方案2】：

您可以在经典表格的基础上创建“新标签”，一个“div表格”：

<STYLE>
dtable {
 display:table;
 width:100%;
 border:1px solid #000;
 border-spacing:5px;
}
dtable dtr {
 display:table-row;
 clear: both;
}
dtable dtd {
 display:table-column;
 padding:5px;
}
</STYLE>

<DTABLE>
 <DTR>
  <DTD>row 1 col 1</DTD>
  <DTD>row 1 col 2</DTD>
 </DTR>
 <DTR>
  <DTD>row 2 col 1</DTD>
  <DTD>row 2 col 2</DTD>
 </DTR>
</DTABLE>

您可以为每个“dtd”使用特定的 CSS 选择器，例如：

dtable dtd:nth-child(1) {
 width:300px;
 font-weight:bold;
}

dtable dtd:nth-child(2) {
 width:400px;
}

和“斑马”之类的：

dtable dtr:nth-child(odd) {
 background-color:#ddd;
}

还有更多，请参阅：https://css-tricks.com/useful-nth-child-recipies/

【讨论】：

【解决方案3】：

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

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

【讨论】：

【解决方案4】：

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

可运行的sn-p：

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

【讨论】：

行数超出 IE 上的矩形。你知道怎么装吗？
只是一个小修正：display:table-column 应该用来模仿<col> 标签，模仿<td> 使用display: table-cell

【解决方案5】：

这是一个旧线程，但我认为我应该发布我的解决方案。我最近遇到了同样的问题，我解决它的方法是按照下面概述的 三步方法 非常简单，没有任何复杂的 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 类指定宽度

单元格 {display:inline-block;宽度：340px;}
使用现代浏览器的 CSS 如下。

.table {显示：表； } .row {显示：表行；} .cell {显示：表格单元格；}

【讨论】：

这不会这样做，因为列的大小不同。
你说得对，宽度不像在表格元素中那样表现。但是，如果你在它的 CSS 中为 .cell 类指定一个宽度，比如 .cell { width: 300px;} 那么你可以达到类似的效果。但是，除非您为单元格 CSS 类定义宽度，否则您提到的限制在使用 div 时将始终存在。获得相同效果的另一种方法是使用以下类：而不是使用上述答案中提到的类。
@thatsIch，我在答案中添加了更新 1，解释了您提到的宽度问题的解决方法

【解决方案6】：

在构建一组自定义布局标签时，我找到了这个问题的另一个答案。此处提供的是自定义标签集及其 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 相同，强制和空单元格正确渲染。

【讨论】：

【解决方案7】：

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

【讨论】：

如果您的表格单元格中有<div> 元素？你可能想要.common_table div > div

【解决方案8】：

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

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

【讨论】：

【解决方案9】：

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

或

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

【讨论】：

【解决方案10】：

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

【讨论】：

嘿，我还在学习 CSS/HTML 样式，想了解最佳实践。我发现这是因为我试图创建一个数据容器，该容器将在“桌面”模式下显示表格行中的元素，但在“移动”模式下会垂直打印元素（每个元素多行）。这可以使用@media 标签覆盖基于屏幕大小的样式来完成。如果不在桌面模式下使用类似于表格的 div，但在移动模式下不使用，那么实现此目的的最佳做法是什么？
@simplyletgo：从语义上讲，将表格单元格设置为块更合适，而不是尝试让 div 像表格一样。
为什么不呢？例如，如果您使用表格，则不能在某些单元格周围添加滚动条，以便表格具有类似 excel 的锁定标题。表格有很多限制，为什么不能用 div 做到这一点？
@pilavdzice：它可以，如果你有一个很好的理由放弃最佳实践......但它应该是最后的手段。 Div 的语义值为零，并且仅在您需要块级元素但没有语义等效项时才应该存在。如果数据实际上是一个表，那么它应该被标记为一个，直到你有充分的理由不这样做。
@pilavdzice：至于限制，正确使用的表格实际上并没有那么多（对于自然表格数据）。