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

问题描述 投票：0回答：11

我想仅使用 

<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
11个回答
300
投票
.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;  
}

可运行片段：

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

91
投票

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

14
投票

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

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

三步简单方法

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

    用块 div 替换表格元素（使用
  1. .table
     类）
    2. 用块 div 替换每个 tr 或 th 元素（使用
  2. .row
     类）
    3. 用内联块 div 替换每个 td 元素（使用
  3. .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 {显示：内联块；宽度：340px;}
    

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


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

    

    • 
    



      

      
      
      

      

        

          

            

              
11
投票

              
            

          

        

        
它对我有用，并且有助于创建响应式表格，有关更多信息，请访问此网站：
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>





    



      

      
      
      

      

        

          

            

              
5
投票

              
            

          

        

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



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



      

      
      
      

      

        

          

            

              
4
投票

              
            

          

        

        
如果
<table>
中有任何你不喜欢的东西，也许你可以使用
重置文件？


或



如果您需要此页面布局，请查看 
cssplay 布局示例，用于设计没有表格的网站。
    



      

      
      
      

      

        

          

            

              
2
投票

              
            

          

        

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



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

    



      

      
      
      

      

        

          

            

              
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 

    



      

      
      
      

      

        

          

            

              
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 }



使空单元格和一般单元格具有正确大小的关键是框大小和填充。 Border 也会做同样的事情，但会在行中创建一条线。填充则不然。而且，虽然我还没有尝试过，但我认为边距的作用与填充相同，强制正确渲染空单元格。

    



      

      
      
      

      

        

          

            

              
0
投票

              
            

          

        

        
您可以基于经典表格“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/
    



      

      
      
      

      

        

          

            

              
0
投票

              
            

          

        

        




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





    



      

      
    

  

  

    
最新问题


  





  

    © www.soinside.com 2019 - 2024. All rights reserved.