CODEWITHSUNDEEP
htmlcss
HD..
HD..

Reputation: 1476

trying to create table using list element in html

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.

Table like list

Upvotes: 0

Views: 844

Answers (4)

Milan and Friends
Milan and Friends

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">&#9660;</span></li>
    <li class="second">1</li>
    <li class="first">&middot;</li>

    <li class="fourth">x</li>
    <li class="third"><span class="icon">I</span> Text <span class="arrow">&#9660;</span></li>
    <li class="clear">&nbsp;</li>

    <li class="fourth">x</li>
    <li class="third small">Text <span class="arrow">&#9660;</span></li>
    <li class="clear">&nbsp;</li>

    <li class="fourth">x</li>
    <li class="third"><span class="icon">P</span> Text <span class="arrow">&#9660;</span></li>
    <li class="second">2</li>
    <li class="first">&middot;</li>

    <li class="fourth">x</li>
    <li class="third"><span class="icon">I</span> Text <span class="arrow">&#9660;</span></li>
    <li class="clear">&nbsp;</li>

    <li class="fourth">x</li>
    <li class="third"><span class="icon">I</span> Text <span class="arrow">&#9660;</span></li>
    <li class="clear">&nbsp;</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

enter image description here

Upvotes: 0

Mouagip
Mouagip

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">&times;</span></li>
      <li>Large<span class="table-list__close">&times;</span></li>
    </ul>
  </li>
  <li>
    <ul class="table-list__inner">
      <li>Infusion<span class="table-list__close">&times;</span></li>
      <li>Sugar<span class="table-list__close">&times;</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

ciaodarwin
ciaodarwin

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

Ravimallya
Ravimallya

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

Related Questions