如何创建没有常规表格标签的表格？

我怎样才能创建一个没有<table>标签的表格？所以它应该看起来像一个普通的表，但不使用公共表标签。如何创建没有常规表格标签的表格？

2015-11-02 Alex

您可以使用UL李为创建或使用 –

格。创建嵌套的div-s。它在响应式设计中非常受欢迎。您可以检查http://stackoverflow.com/questions/17773186/how-to-use-divs-instead-of-tables也搜索谷歌** css div而不是表** – Soley

您可以像这样使用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>

来源

2015-11-02 06:43:03

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

您可以使用CSS tables具有相同的功能HTML 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>

来源

2015-11-02 06:48:19

我支持Manoj的回答 – 2015-11-02 06:56:07

@Marius Balaj：你通过upvoting来做到这一点，而不是评论。评论框甚至说“避免评论，如+1或感谢。” – BoltClock

您可以使用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>

来源

2015-11-02 06:50:04 ketan

如何创建没有常规表格标签的表格？

回答

相关问题