i am using a UL and Li to create a table like look for my HTML website.
<div class="list-wrapper">
<div class="row">
<ul >
<li class="col-xs-1"><img src="./details_files/experience.png" alt=""></li>
<li class="col-xs-2" ><strong>Total Experience</strong></li>
<li class="col-xs-3" id= "url1">7 Year(s)</li>
<li class="col-xs-3">7 Year(s)</li>
<li class="col-xs-3">7 Year(s) this is going to the next line</li>
</ul>
</div>
The following CSS is used :
.list-wrapper ul li { display: table-cell;
vertical-align: top;
width: 185px;
height: auto;
font-size: 20px;
border-right: 5px solid #E6E6E6;
border-bottom: 5px solid #E6E6E6;
padding: 10px;
background-color: #FFF;}
Right now the 4th li is taking 2-3 lines, but the other li’s are only taking 1. I want to auto adjust the cell size to take up the entire row.
Please HELP>>>
THE screenshot is :
http://s18.postimg.org/5jjagrbux/upload.png
Source: html