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

Question

如何使用<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>

Run Code Online (Sandbox Code Playgroud)

风格:

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

Run Code Online (Sandbox Code Playgroud)

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

Answer 1

Shi*_*lly 250

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

Run Code Online (Sandbox Code Playgroud)

Runnable片段:

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

Run Code Online (Sandbox Code Playgroud)

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

Run Code Online (Sandbox Code Playgroud)

谢谢!有人真正回答了他的问题而不只是说"这是一个愚蠢的想法." 当人们不回答问题时,我讨厌它...如果他问的话,应该回答 (211认同)
@cHao如果您认为应该是答案,那么请忽略它,让真正想回答问题的人回答它. (27认同)
@stumpx:有时正确答案是"不要那样做".这是其中一次.当你不得不问"我如何使用div和CSS创建一个表"时,你会遇到两个问题之一:要么是你提出了错误的问题,要么是你试图做错事. (22认同)
@stumpx:如果我认为问题*不应该回答*,我投票结束 - 因为这个问题甚至不应该存在.所有有效的问题都值得回答.但就像我说的,有时最正确的答案是"不要这样做".建议别人如何解决错误的问题是否好？在*其他人提供这样的建议的同时袖手旁观是好事吗？我拒绝. (14认同)
如果你不知道你的设计师在它的头脑中有什么,那么将数据保留在上面的div结构中会比把它们放在桌子上要好得多.更好意味着更容易从浮动div转换为表格,反之亦然. (5认同)
@ingrid:替代路线是**使用一个吓人的表**.这种对表格的非理性仇恨,特别是对于*明显*表格数据,是真正的问题.克服这一点,被问到的问题就消失了.表可以像任何其他元素一样设置样式; 我从来没有遇到过让他们看起来正确的问题.如果你不能让它看起来正确,那么你将使用`display:table-whatever`来解决与div相同的问题,因为它使用相同的布局机制. (3认同)
@cHao只是为了投入.我在Google上搜索如何做同样的事情时发现了这一点.在我的情况下,我知道使用div来表示表格数据是一个可怕的想法,但我必须因为我的开发环境的限制(长篇故事,自定义内部的东西)所以我需要使用div而不是表格作为解决方法. (2认同)
我曾经喜欢表格，然后问为什么有人要用divs建立网格...直到我开始做高级的jquery东西。是否曾经尝试过对表格单元格及其内容进行精美的jQuery编码？恶梦。普通的Div不能在表单元格内工作，如果您进行任何高级操作，则在其中的跨度会出现问题。对于简单的页面，可以肯定要配一张桌子。但是，如果您需要对网格区域进行最大程度的细粒度动态控制，则使用div是可行的方法。 (2认同)
有一个仅div表的应用程序，例如，我试图在kendo自动完成小部件的结果下拉列表中呈现一个表，并且不允许在该表中使用表，因此唯一的方法是在右边添加div css创建表的幻觉。有时，产生一个足够好的理由（在某种情况下适用）比找到问题的答案要耗费更多的精力，这就是为什么不应如此迅速地将其消除。仅仅因为它对您没有意义，就不会使其无效 (2认同)
只是一个小的修正:`display:table-column`应该用来模仿`<col>`标签,模仿`<td>`使用`display:table-cell` (2认同)

Answer 2

Kob*_*obi 97

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

虽然可以取决于应用程序.有时看似表格的内容可能是线性的,尽管是分开的.例如,日历可以作为div而不是表来获益 (8认同)
有几个原因我们要求表格与DIV一起分配.其中一个是在SharePoint 2007中使用表标记,用于处理页面中存在的每个内容 (4认同)
@Dann:他们可能有*list*的好处,但是一堆div在语义上和布局表一样糟糕. (2认同)
@simplyletgo:从语义上讲,将表格单元格设置为块的样式比尝试使div像表格更合适更合适. (2认同)

Answer 3

小智 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;
    }

Run Code Online (Sandbox Code Playgroud)

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

Run Code Online (Sandbox Code Playgroud)

Answer 4

Sun*_*nil 6

这是一个老线程,但我想我应该发布我的解决方案.我最近遇到了同样的问题,我解决它的方法是遵循下面概述的三步法,这很简单,没有任何复杂的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;}

Run Code Online (Sandbox Code Playgroud)

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

Run Code Online (Sandbox Code Playgroud)

更新1

为了解决thatslch在评论中提到的列的所有单元格中没有维持相同宽度的影响,可以采用以下两种方法中的任何一种.

指定cell类的宽度

cell {display:inline-block; 宽度:340px;}
使用现代浏览器的CSS如下所示.

.table {display:table; }.{display:table-row;} .cell {display:table-cell;}

这是行不通的，因为列的大小不同。 (2认同)

Answer 5

Zar*_*rdo 5

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

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

归档时间：	15 年，2 月前
查看次数：	525952 次
最近记录：	6 年，11 月前