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

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

当前回答

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

如果你需要这样的页面布局，请查看cssplay布局示例，以设计没有表格的网站。

2010-06-16 12:39:33

其他回答

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

2010-06-16 12:32:33

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

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

2018-10-17 04:50:21

你可以创建“新标签”基于经典的表格，一个“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/

2021-10-04 20:37:56

在构建一组自定义布局标记时，我找到了这个问题的另一个答案。这里提供了自定义标签集及其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也会做同样的事情，但会在行中创建一行。填充不。而且，虽然我还没有尝试过，我认为保证金将以同样的方式填充，在强制和空单元格被正确渲染。

2016-07-27 18:32:10

它为我工作，它的帮助是创建响应表，欲了解更多信息，请访问这个网站: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>

2021-10-11 14:40:45

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

推荐文章

最新文章

标签