如何创建没有常规表格标签的表格？ [关闭]
Posted
技术标签:
【中文标题】如何创建没有常规表格标签的表格？ [关闭]【英文标题】：How can I create a table without the regular table tag? [closed] 【发布时间】：2016-02-02 00:06:33 【问题描述】：如何创建没有<table> 标记的表？所以它应该看起来和普通的表格一模一样，但没有使用常见的表格标签。
【问题讨论】：
你可以使用ul li来创建或者 使用 div。创建嵌套的 div-s。它在响应式设计中非常受欢迎。您可以查看***.com/questions/17773186/… 也可以在 google 中搜索 css div 而不是 table 【参考方案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 类。以上是关于如何创建没有常规表格标签的表格？ [关闭]的主要内容，如果未能解决你的问题，请参考以下文章