javascript - how to display list as table? - Stack Overflow

admin管理员组

文章数量:1399116

I have a list of items with different content floated left, I need to display them as a row.

<ul>
<li>small content..</li>
<li>medium Content..</li>
<li>large content..</li>
..
<!-- many item random contnet -->
</ul>

I would like to display the list items in a row.
row height depends on max height item in row, How to get it?

Demo

I have a list of items with different content floated left, I need to display them as a row.

<ul>
<li>small content..</li>
<li>medium Content..</li>
<li>large content..</li>
..
<!-- many item random contnet -->
</ul>

I would like to display the list items in a row.
row height depends on max height item in row, How to get it?

Demo

• javascript
• jquery
• html
• css
• position

Share Improve this question Follow asked Apr 3, 2013 at 10:17 user1834809user1834809 1,31144 gold badges1818 silver badges2828 bronze badges 6

• I think this is not a good idea. I would instead do it with divs. – Jai Commented Apr 3, 2013 at 10:19
• @Jai <table> is also a good element. – VisioN Commented Apr 3, 2013 at 10:20
• I am adding elements dynamically so I cannot sort them as table. – user1834809 Commented Apr 3, 2013 at 10:22
• Google "unordered list as table row" and click the first result. – Mike Campbell Commented Apr 3, 2013 at 10:23
• Don't !!! If you have table content use <table>. If you care about semantics, else use <span> or whatever – Axente Paul Commented Apr 3, 2013 at 10:37

 |  Show 1 more ment

6 Answers 6

Sorted by: Reset to default 4

Add display:table-cell so it acts as table column. remove float:left as well.

#contentpane{}
#contentpane li{
    padding:10px;
    width:80px;
    border:1px solid #000;
    display:table-cell
}

DEMO

---

CASE 2

In case you need it with auto height then use the below white-space:nowrap; method

ul#contentpane{
    width:100%;  
    white-space:nowrap;

}
#contentpane li{
    padding:10px;
    width:80px;
    border:1px solid #000;
    height:auto;
    display:inline-block;
    white-space:normal !important;
}

DEMO 2 || DEMO (Vertically aligned to the top)

you should go with javascript to set clear:both to row overflow element.

 var ch=$("#container").width();

    var itemsPerRow=Math.floor(ch/102);

    var itemsCount=$("#contentpane li").length;
    var loopRound=Math.floor(itemsCount/itemsPerRow);

    for(var i=1;i<loopRound+1;i++)
    {
        var nextFirstItem=i*itemsPerRow+1;

        $("#contentpane li:nth-child("+ nextFirstItem  +")").css({"clear":"both"});
    }

demo

ul {
    display: table-row;
}

ul  > li {
    display: table-cell;
}

Note that you should have a wrapper with display: table in order to built a plete table representation.

Set height to the li.

#contentpane{

}
#contentpane li{
    float:left;
    padding:10px;
    width:80px;
    height:180px;
    overflow:auto;
    display:table-cell;
    border:1px solid #000;
}

FIDDLE

Try this one

var maxHeight = 0;
 $("#contentpane li").each(function( index ) {
     var height = $(this).height();
     if(height  > maxHeight){
         maxHeight =height;
      }
 });

$("#contentpane li").css("height",maxHeight);

Fiddle Demo

Drop the float and use inline-block instead:

http://jsfiddle/CmkSb/10/

#contentpane li{
    padding:10px;
    width:80px;
    display:inline-block;
    vertical-align: text-top;
    border:1px solid #000;
}

本文标签： javascripthow to display list as tableStack Overflow