如何創建沒有常規表格標籤的表格？

我怎樣才能創建一個沒有<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

如何創建沒有常規表格標籤的表格？

回答

相關問題