如何使用<div&gt创建表;标签和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及以下版本下使用。请给我你的解决方案和想法。 谢谢。< / p >
691256 次浏览
小开

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

小开

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

或

如果你需要这个页面布局，检查csplay布局示例用于设计没有表格的网站。

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

小开

使用正确的文档类型;这将解决问题。在HTML文件的顶部添加以下代码行:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
小开
有点跑题，但可以帮助某人更干净的HTML… CSS < / p > 
.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;
}

超文本标记语言

<DIV class="common_table">
<DIV><DIV>this is a cell</DIV></DIV>
<DIV><DIV>this is a cell</DIV></DIV>
</DIV>

适用于Chrome和Firefox

小开

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

(注意:当然，对于现代浏览器，使用table或table-row或table-cell的值来显示CSS属性将解决这个问题。但是我使用的方法在现代和旧的浏览器中都同样有效，因为它不使用这些值来显示CSS属性。)

三步简单法

对于只带有div的表格，您可以像在表格元素中一样获得单元格和行，请使用以下方法。

  1. 用块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类指定宽度

    细胞{显示:inline-block;宽度:340 px;} < / p >

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

    .table{显示:表;｝ .row{显示:table-row;} .cell{显示:表格单元;} 李< / p > < / >

小开

在构建一组自定义布局标记时，我找到了这个问题的另一个答案。这里提供了自定义标签集及其CSS类。

超文本标记语言

<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也会做同样的事情，但会在行中创建一行。填充不。而且，虽然我还没有尝试过，我认为保证金将以同样的方式填充，在强制和空单元格被正确渲染。

小开

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

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

小开

您可以创建“新标签”;基于经典表格，一个&;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;
}

和“;zebras"如:

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

以及更多，参见:https://css-tricks.com/useful-nth-child-recipies/

小开

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


提交答案