css - Multi column list html -


enter image description here

i make product list above, tried following code not looks 1 please suggest me in right way,

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

how can achieve pic.thanks alot

you should use table kind of data. it's semantically correct way.

a table matches it's size content. if use divs in own code not stretch nicely. i've created table , gave width of 100%. should give want.

the tr stands table row, th stands table header , td stands table cell.

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


Comments

Popular posts from this blog

PySide and Qt Properties: Connecting signals from Python to QML -

c# - DevExpress.Wpf.Grid.InfiniteGridSizeException was unhandled -

scala - 'wrong top statement declaration' when using slick in IntelliJ -