html - 多列列表html

Question

我想像上面那样制作产品列表，我尝试使用以下代码但它看起来不太好，请以正确的方式给我建议，

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

<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>

我怎样才能像图片一样。非常感谢

Answer 1

您应该为此类数据使用表格。这是语义上正确的方式。

表格的大小与所有内容相匹配。如果您像在自己的代码中那样使用 div，那么它们将不会很好地拉伸(stretch)。我创建了一个表格并将其宽度设置为 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>