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

Question

提问by Kumara

I want to create table only using <div>tag and CSS.

我只想使用<div>标签和 CSS创建表格。

This is my sample table.

这是我的示例表。

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

And Style:

和风格：

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

But this table not work with IE7 and below version.Please give your solution and ideas for me. Thanks.

但是这个表不适用于IE7及以下版本。请给我你的解决方案和想法。谢谢。

Answer 1

回答by Shiva Komuravelly

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

可运行的片段：

.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

回答by Kobi

divs shouldn't be used for tabular data. That is just as wrong as using tables for layout.
Use a <table>. Its easy, semantically correct, and you'll be done in 5 minutes.

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

Answer 3

回答by Sunil

This is an old thread, but I thought I should post my solution. I faced the same problem recently and the way I solved it is by following a three-step approachas outlined below which is very simple without any complex CSS.

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

(NOTE : Of course, for modern browsers, using the values of table or table-row or table-cell for display CSS attribute would solve the problem. But the approach I used will work equally well in modern and older browsers since it does not use these values for display CSS attribute.)

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

3-STEP SIMPLE APPROACH

3 步简单方法

For table with divs only so you get cells and rows just like in a table element use the following approach.

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

Replace table element with a block div (use a .tableclass)
Replace each tr or th element with a block div (use a .rowclass)
Replace each td element with an inline block div (use a .cellclass)

用块 div 替换 table 元素（使用 .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>

UPDATE 1

更新 1

To get around the effect of same width not being maintained across all cells of a column as mentioned by thatslchin a comment, one could adopt either of the two approaches below.

为了避免thatslch评论中提到的在列的所有单元格中没有保持相同宽度的效果，可以采用以下两种方法之一。

Specify a width for cellclass
cell {display:inline-block; width:340px;}
Use CSS of modern browsers as below.
.table {display:table; } .row { display:table-row;} .cell {display:table-cell;}

指定cell类的宽度
单元格{显示：内联块；宽度：340px;}
使用现代浏览器的 CSS 如下。
.table {显示：表格；} .row { display:table-row;} .cell {display:table-cell;}

Answer 4

回答by Urszula Karzelek

If there is anything in <table>you don't like, maybe you could use reset file?

如果<table>您不喜欢任何内容，也许您可以使用重置文件？

or

或者

if you need this for layout of the page check out the cssplay layout examplesfor designing websites without tables.

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

Answer 5

回答by Zardo

I don't see any answer considering Grid-Css. I think it is a very elegant approach: grid-css even supports row span and and column spans. Here you can find a very good article:

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

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

Answer 6

回答by E Net Arch

In building a custom set of layout tags, I found another answer to this problem. Provided here is the custom set of tags and their CSS classes.

在构建一组自定义布局标签时，我找到了这个问题的另一个答案。此处提供的是自定义标签集及其 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 }

The key to getting empty cells and cells in general to be the right size, is Box-Sizing and Padding. Border will do the same thing as well, but creates a line in the row. Padding doesn't. And, while I haven't tried it, I think Margin will act the same way as Padding, in forcing and empty cell to be rendered properly.

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

Answer 7

回答by abcd

Use the correct doc type; it will solve the problem. Add the below line to the top of your HTML file:

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

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

Answer 8

回答by Harijs Krūtainis

A bit OFF-TOPIC, but may help someone for a cleaner HTML... CSS

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

Works on Chrome and Firefox

适用于 Chrome 和 Firefox

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

提问by Kumara

回答by Shiva Komuravelly

回答by Kobi

回答by Sunil

回答by Urszula Karzelek

回答by Zardo

回答by E Net Arch

回答by abcd

回答by Harijs Krūtainis

相关推荐

最近更新

标签

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

提问by Kumara

回答by Shiva Komuravelly

回答by Kobi

回答by Sunil

回答by Urszula Karzelek

回答by Zardo

回答by E Net Arch

回答by abcd

回答by Harijs Krūtainis

相关推荐

Html 输入提交按钮中的字体真棒图标和文本？

IE 中的 HTML 表格宽度？

在文本框中按 Enter 时如何触发 HTML 按钮？

Html 如何自定义 Bootstrap 3 标签颜色

相关推荐

最近更新

标签