多列列表html

Question

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

＆＃13;

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;

＆＃13;

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;

我如何实现像pic.Thanks alot

Answer 1

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

表格将其大小与所有内容相匹配。如果您在自己的代码中使用div，那么它们将无法很好地延伸。我创建了一张桌子并给它宽度为100％。这应该会给你你想要的东西。

tr代表表格行，th代表表格标题，td代表表格单元格。

＆＃13;

＆＃13;

.tablep {
    width: 100%;
}

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

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;

Answer 2

您可以在css中进行一些更改

        var time_api = this.api();
        //total
        var total = time_api.column(3)
                .data()
                .sum();           

        //footer
        $(time_api.column(3)
            .footer())
            .html(total);

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