We would like to know how to relative Position inside Table Cell.
<!DOCTYPE html>
<html>
<head>
<style type='text/css'>
.container {<!-- ww w .java2 s . c o m-->
position: relative;
margin: 10% auto;
width: 96%;
max-width: 400px;
background: mistyrose;
border: 1px solid plum;
}
.table {
display: table;
width: 100%;
border-spacing: 10px;
}
.table>li {
position: relative;
display: table-cell;
height: 100px;
background: plum;
}
.icon {
position: absolute;
top: 0;
left: 0;
width: 20px;
height: 20px;
background: purple;
}
</style>
</head>
<body>
<div class="container">
<ul class="table">
<li>
<div class="icon"></div>
</li>
<li>
<div class="icon"></div>
</li>
<li>
<div class="icon"></div>
</li>
<li>
<div class="icon"></div>
</li>
</ul>
</div>
</body>
</html>
The code above is rendered as follows: