多列列表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>