多列列表HTML

Question

我想使產品清單像上面，我試着用下面的代碼，但它不是看起來好一些一，請建議我在正確的方式，

.tablep{ 
 
\t float:left; 
 
\t padding-right:150px; 
 
\t \t } 
 
\t .bg{ 
 
\t \t background-color:grey; 
 
\t }

<div class="tablep bg">Code #</div><div class="tablep bg">Product Name</div><div class="tablep bg">Date</div><div class="tablep bg">Amount</div><br> 
 
<div class="tablep">Id1</div><div class="tablep">product1</div><div class="tablep">2015</div><div class="tablep">100USD</div>

我怎樣才能達到像pic.Thanks很多

Answer 1

你應該使用這種類型的數據表。這是語義上正確的方式。

表將其大小與所有內容匹配。如果你在自己的代碼中使用div，那麼它們不會很好地伸展。我創建了一個表格，並給它一個100％的寬度。這應該給你你想要的東西。

tr代表表格行，th代表表格標題，td代表表格單元格。

.tablep { 
 
    width: 100%; 
 
} 
 

 
.tablep th { 
 
    background: lightgrey; 
 
    text-align: left; 
 
}

<table class="tablep" cellspacing="0"> 
 
    <tr> 
 
    <th>Code #</th><th>Product Name</th><th>Date</th><th>Amount</th> 
 
    </tr> 
 
    <tr> 
 
    <td>Id1</td><td>product1</td><td>2015</td><td>100USD</td> 
 
    </tr> 
 
    <tr> 
 
    <td>Id1</td><td>product1</td><td>2015</td><td>100USD</td> 
 
    </tr> 
 
    <tr> 
 
    <td>Id1</td><td>product1</td><td>2015</td><td>100USD</td> 
 
    </tr> 
 
</table>

Answer 2

您可以將某些改變你的CSS

.tablep{ 
 
\t float:left; 
 
\t width:20%; 
 
\t \t } 
 
\t .bg{ 
 
\t \t background-color:grey; 
 
\t }

<div class="tablep bg">Code #</div><div class="tablep bg">Product Name</div><div class="tablep bg">Date</div><div class="tablep bg">Amount</div><br> 
 
    <div class="tablep">Id1</div><div class="tablep">product1</div><div class="tablep">2015</div><div class="tablep">100USD</div>