Reputation: 1476
i have a problem with this table. i never created table like this. if any one know how to create this type of table like list? Just help me! pls. all suggestion appreciated.
here is small code which i going to use:
<html>
<body>
<style>
li{
border:1px solid black;
text-align:center;
}
</style>
<ul style="list-style: none outside none;">
<li style="float: left;display: block;width: 100px;height: 40px;">Field 1</li>
<li style="float: left;display: block;width: 100px;height: 40px;">Field 2</li>
<li style="float: left;display: block;width: 100px;height: 40px;">Field 3</li>
</ul>
</body>
</html>
following image will for better understanding how i required output.
Upvotes: 0
Views: 844
Reputation: 5610
Here's a FIDDLE little complicated but close.
<div>
<ul>
<li class="fourth">x</li>
<li class="third"><span class="icon">P</span> Text <span class="arrow">▼</span></li>
<li class="second">1</li>
<li class="first">·</li>
<li class="fourth">x</li>
<li class="third"><span class="icon">I</span> Text <span class="arrow">▼</span></li>
<li class="clear"> </li>
<li class="fourth">x</li>
<li class="third small">Text <span class="arrow">▼</span></li>
<li class="clear"> </li>
<li class="fourth">x</li>
<li class="third"><span class="icon">P</span> Text <span class="arrow">▼</span></li>
<li class="second">2</li>
<li class="first">·</li>
<li class="fourth">x</li>
<li class="third"><span class="icon">I</span> Text <span class="arrow">▼</span></li>
<li class="clear"> </li>
<li class="fourth">x</li>
<li class="third"><span class="icon">I</span> Text <span class="arrow">▼</span></li>
<li class="clear"> </li>
</ul>
</div>
div {
width: 470px;
font-family: Verdana;
font-size: 14px;
letter-spacing: 1px;
color: #222;
}
ul {
float: left;
list-style: none;
margin: 0;
padding: 0;
}
li {
float: right;
height: 35px;
margin: -1px 0 0 -1px;
padding-top: 15px;
text-align: center;
border: 1px solid #999;
}
.clear {
width: 72px;
border: none;
}
.first {
width: 20px;
}
.second {
width: 50px;
}
.third {
width: 350px;
padding-left: 10px;
text-align: left;
}
.arrow {
float: right;
margin-right: 5px;
}
.icon {
background: #333;
display: inline-block;
text-align: center;
width: 20px;
height: 18px;
color: #fff;
}
.arrow:hover,
.fourth:hover {
color: #555;
cursor: pointer;
}
.fourth {
width: 35px;
clear: right;
}
Result
Upvotes: 0
Reputation: 5329
Try using nested ol
and ul
like this (see this pen):
HTML
<ol class="table-list">
<li>
<ul class="table-list__inner">
<li>Cranberries<span class="table-list__close">×</span></li>
<li>Large<span class="table-list__close">×</span></li>
</ul>
</li>
<li>
<ul class="table-list__inner">
<li>Infusion<span class="table-list__close">×</span></li>
<li>Sugar<span class="table-list__close">×</span></li>
</ul>
</li>
</ol>
CSS
.table-list li {
min-height: 70px;
border: 1px solid gray;
border-bottom-width: 0;
position: relative;
}
.table-list li:last-child {
border-bottom-width: 1px;
}
.table-list__inner {
list-style: none;
padding-left: 0;
}
.table-list__inner li {
border-width: 0;
border-bottom-width: 1px;
}
.table-list__inner li:last-child {
border: 0;
}
.table-list__close {
float: right;
padding: 0.5em;
}
You should be able to use this with ngRepeat
quite well.
Upvotes: 1
Reputation: 481
html
<body>
<table border="1">
<tr><th>row1</th><th>row2</th></tr>
<tr><td>
<ul>
<li>Field 1</li>
<li>Field 2</li>
<li>Field 3</li>
</ul></td>
<td>X</td>
</tr>
<tr><td>
<ul>
<li>Field 1</li>
<li>Field 2</li>
<li>Field 3</li>
</ul></td>
<td>X</td>
</tr>
</body>
css
li{
display: block;
float: left;
}
ul {
list-style: none outside none;
}
EDIT: take a look at jsfiddle
Upvotes: 1
Reputation: 6610
I think you wanted to convert list into a table layout. If yes, please cover your list within a div and give the css as below:
<div class="table">
<ul>
<li>Field 1</li>
<li>Field 2</li>
<li>Field 3</li>
</ul>
<ul>
<li>Field 1</li>
<li>Field 2</li>
<li>Field 3</li>
</ul>
</div>
CSS
.table {
display:table;
width:100%;
border-top:1px solid #ddd;
border-left:1px solid #ddd;
}
.table ul
{
list-style:none;
margin:0;
padding:0;
display:table-row;
}
.table ul li {
display:table-cell;
text-align:center;
border-bottom:1px solid #ddd;
border-right:1px solid #ddd;
padding:2px 4px;
}
Demo Link http://jsbin.com/AHOVAKOJ/1
Upvotes: 1