How do I make like this using html, css? Not table tag, Just use list tag ex) <li> <ol> <ul>

Question

I have small mission on my test project and I have to make a list view like table.

Similar to Below snippet.

 function highlight(e) { if (selected[0]) selected[0].className = ''; e.target.parentNode.className = 'selected'; } var table = document.getElementById('table'), selected = table.getElementsByClassName('selected'); table.onclick = highlight; function fnselect(){ var $row=$(this).parent().find('td'); var clickeedID=$row.eq(0).text(); // alert(clickeedID); } $("#tst").click(function(){ var value =$(".selected td:first").html(); value = value || "No row Selected"; alert(value); });

 td {border: 1px #DDD solid; padding: 5px; cursor: pointer;} .selected { background-color: brown; color: #FFF; }

 <table id="table"> <tr> <td>1 Ferrari F138</td> <td>1 000€</td> <td>1 200€</td> <td>Model monopostu stajne Scuderia Ferrari pre sezónu 2013</td> <td>1</td> <td>F138</td> <td>Klik pre detaily</td> </tr> <tr> <td>2 Ferrari F138</td> <td>1 000€</td> <td>1 200€</td> <td>Model monopostu stajne Scuderia Ferrari pre sezónu 2013</td> <td>1</td> <td>F138</td> <td>Klik pre detaily</td> </tr> <tr> <td>3 Ferrari F138</td> <td>1 000€</td> <td>1 200€</td> <td>Model monopostu stajne Scuderia Ferrari pre sezónu 2013</td> <td>1</td> <td>F138</td> <td>Klik pre detaily</td> </tr> </table> <input type="button" id="tst" value="OK" onclick="fnselect()" />

This code is from ' http://jsfiddle.net/sunil_hari/Z22NU/17/ '

In this, I want to replace table tag <th> <td> with list tags <ul> <li> in html.

This is my mentor's requirement and It's very much difficult for me because I'm not familiar with UI (html, css).

Please Give me some suggestions or example to achieve this mission.

Thanks in advance.

Answer 1

Best way is to make is using table display properties in css. Because auto - Cell resize will be taken care in table view and all features of using tr td table can be used when display properties used except for merging cell. I have tried some please have a look at it. Just worked with css alone.

 div{ display:table; border-collapse:sepearte } ul{ display:table-row } li{ display:table-cell; border:1px solid #dfdfdf; padding:5px; }

 <div> <ul> <li> 1 Ferrari F138 </li> <li> 1 200€ </li> <li> 1 200€ </li> <li> odel monopostu stajne Scuderia Ferrari pre sezónu 2013 </li> <li> 1 200€ </li> </ul> <ul> <li> 1 Ferrari F138 </li> <li> 1 200€ </li> <li> 1 200€ </li> <li> odel monopostu stajne Scuderia Ferrari pre sezónu 2013 </li> <li> 1 200€ </li> </ul> <ul> <li> 1 Ferrari F138 </li> <li> 1 200€ </li> <li> 1 200€ </li> <li> odel monopostu stajne Scuderia Ferrari pre sezónu 2013 </li> <li> 1 200€ </li> </ul> <ul> <li> 1 Ferrari F138 </li> <li> 1 200€ </li> <li> 1 200€ </li> <li> odel monopostu stajne Scuderia Ferrari pre sezónu 2013 </li> <li> 1 200€ </li> </ul><ul> <li> 1 Ferrari F138 </li> <li> 1 200€ </li> <li> 1 200€ </li> <li> odel monopostu stajne Scuderia Ferrari pre sezónu 2013 </li> <li> 1 200€ </li> </ul> </div>

Refer the fiddle here

Answer 2

you can achieve the table effect with using unordered list and a div element

    <div class="wrapper">
    <ul class="itemrow">
        <li><div>1one</div></li>
        <li><div>1two</div></li>
        <li><div>1three</div></li>

    </ul>
  <ul class="itemrow">
        <li><div>2one</div></li>
        <li><div>2two</div></li>
        <li><div>2three</div></li>

    </ul>
  <ul class="itemrow">
        <li><div>3one</div></li>
        <li><div>3two</div></li>
        <li><div>3three</div></li>

    </ul>
</div>

this would be your css

.wrapper{
    width:600px;
}
.itemrow{
    margin:0;
    padding:0;
}

.itemrow li{
    float:left;
    margin-bottom:0px;
}
.itemrow li div{
    width:198px;
   border-style:solid;
    border-width: 1px;
    border-color:black;
}

Answer 3

Simply, You can use below code to create a view like table using <ul> <li> tags:

<ul style="list-style: none outside none;">
    <li style="float: left;display: block;width: 100px;height: 40px;">Sample Data 1</li>
    <li style="float: left;display: block;width: 100px;height: 40px;">Sample Data 2</li>
    <li style="float: left;display: block;width: 100px;height: 40px;">Sample Data 3</li>
</ul>

EDIT:

Note: You can change the height width as per your requirement in above code.

Here is one nice article, which most likely explains what you need to do:

http://alistapart.com/article/taminglists