如何创建没有常规表格标签的表格？ [关闭]答案

【问题标题】：How can I create a table without the regular table tag? [closed]如何创建没有常规表格标签的表格？ [关闭]
【发布时间】：2016-02-02 00:06:33
【问题描述】：

如何创建没有<table> 标记的表？所以它应该看起来和普通的表格一模一样，但没有使用常见的表格标签。

【问题讨论】：

你可以使用ul li来创建或者
使用 div。创建嵌套的 div-s。它在响应式设计中非常受欢迎。您可以查看stackoverflow.com/questions/17773186/… 也可以在 google 中搜索 css div 而不是 table

标签： html css html-table css-tables

【解决方案1】：

您可以使用 div 创建。并使其易于响应。

使用display:table。

.table{
  display:table;         
  width:auto;                
  border:1px solid  #666666;         
 
}
.table-row{
  display:table-row;
  width:auto;
  clear:both;
}
.table-col{
  float:left;
  display:table-column;         
  width:200px;         
  border:1px solid  #ccc;
}

 <div class="table">
             <div class="table-row">
                  <div class="table-col">1</div>
                <div class="table-col">2</div>
                <div class="table-col">3</div>
            </div>
            <div class="table-row">
                <div class="table-col">a</div>
                <div class="table-col">b</div>
                <div class="table-col">c</div>
           </div>
        </div>

【讨论】：

【解决方案2】：

您可以使用与HTML tables 功能相同的CSS tables。在此处了解有关这些属性的更多信息：The Anti-hero of CSS Layout - "display:table"。这是在 CSS 中引入的，以避免使用 table 标签，但不一定避免使用表格布局。他们仍然需要显示表格数据。

.table {
  display: table;
}
.table-row {
  display: table-row;
}
.table-cell {
  display: table-cell;
  padding: 10px;
  border: 1px solid black;
}
.table-row:nth-child(even) {
  background: lightblue;
}

<div class="table">
  <div class="table-row">
    <div class="table-cell">
      First item
    </div>
    <div class="table-cell">
      Second item
    </div>
    <div class="table-cell">
      Third item
    </div>
    <div class="table-cell">
      Fourth item
    </div>
    <div class="table-cell">
      Fifth item
    </div>
  </div>
  <div class="table-row">
    <div class="table-cell">
      First item
    </div>
    <div class="table-cell">
      Second item
    </div>
    <div class="table-cell">
      Third item
    </div>
    <div class="table-cell">
      Fourth item
    </div>
    <div class="table-cell">
      Fifth item
    </div>
  </div>
  <div class="table-row">
    <div class="table-cell">
      First item
    </div>
    <div class="table-cell">
      Second item
    </div>
    <div class="table-cell">
      Third item
    </div>
    <div class="table-cell">
      Fourth item
    </div>
    <div class="table-cell">
      Fifth item
    </div>
  </div>
</div>

【讨论】：

我赞同 Manoj 的回答
@Marius Balaj：你通过投票而不是评论来做到这一点。评论框甚至说“避免像 +1 或谢谢这样的 cmets。”
@BoltClock 评论框是动态的吗？因为有时我会看到：prnt.sc/kech62 特别是当已经有 cmets 时。

【解决方案3】：

你可以像这样使用ul li。

<html>

<body>
  <ul style="list-style: none outside none;">
    <li style="float: left;display: block;width: 100px;height: 40px;">Field 1</li>
    <li style="float: left;display: block;width: 100px;height: 40px;">Field 2</li>
    <li style="float: left;display: block;width: 100px;height: 40px;">Field 3</li>
  </ul>
</body>

</html>

【讨论】：

请避免使用内联样式。为它们设置单独的 CSS 类。