Can I put a table in a list item?

Asked 15/9, 2010 at 14:19 Answered 15/9, 2010 at 14:37

Solved html css html-table horizontallist

I am trying to fix a horrid nested table layout for a site. The page will have a variable number of elements that leverage Google charts. Instead of complex spaghetti code that tries to lay things out inside of table cells I want to use a horizontal UL so the content blocks will lay out cleanly regardless of the charts involved. The problem I am having is the Google charts components leverage tables. When a table element exists anywhere inside a LI the LI gets moved to the next line (assuming because table elements by default have a newline before and after).

I have tried the various display modes for the table with no luck. Is this a lost cause?

Example HTML code to illustrate the issue:

<html>
<body>
<style type='text/css'>
 #navlist li{
    display:inline;
    list-style-type:none;

    }
</style>
    <ul id='navlist'>
        <li>TEST</li>
        <li>TEST2</li>
        <li>
            <table style='border:1px solid black'><tr><td>TEST</td></tr></table>
        </li>
        <li>TEST3</li>
        <li>
            <table style='border:1px solid blue'><tr><td>TEST</td></tr></table>
        </li>
        <li>
            <table style='border:1px solid green'><tr><td>TEST</td></tr></table>
        </li>
    </ul>
</body>
</html>

Stringendo answered 15/9, 2010 at 14:19 Comment(0)

Set display: inline-block; on your LI elements; that should do it nicely. It doesn't really work in Firefox 2, but nobody uses Firefox 2 anymore. You'll need to specify a doctype to get it to work in IE.

<!DOCTYPE html>
<html>
  <head>
    <style type='text/css'>
      #navlist li {
        display: inline-block;
        zoom: 1;
        *display: inline;
        list-style-type: none;
        vertical-align: middle;
      }
    </style>
  </head>
  <body>
    <ul id='navlist'>
      <li>TEST</li>
      <li>TEST2</li>
      <li>
        <table style='border:1px solid black'><tr><td>TEST</td></tr></table>
      </li>
      <li>TEST3</li>
      <li>
        <table style='border:1px solid blue'><tr><td>TEST</td></tr></table>
      </li>
      <li>
        <table style='border:1px solid green'><tr><td>TEST</td></tr></table>
      </li>
    </ul>
  </body>
</html>

Cambrai answered 15/9, 2010 at 14:29 Comment(5)

Let me get some coffee and try to get my brain started and I'll figure out exactly how I've solved this in IE7 in the past. :) – Cambrai 15/9, 2010 at 14:34

In IE6 (and probably IE7 by the sound of it) you can only apply display:inline-block to elements that were originally inline, like <span>. – Aekerly 15/9, 2010 at 14:35

Remembered it -- you have to force hasLayout, and then set it back to display:inline for IE only. See my edit. Friggin' IE. – Cambrai 15/9, 2010 at 14:36

Yes, I just got this to work through trial/error in FF3 using inline-block, though I put it on DIVs inside the LI. I swear I tried it on the LI themselves before. – Stringendo 15/9, 2010 at 14:36

This explains how to get it working in IE: (add zoom:1 and *display:inline to css) grasshopperpebbles.com/css/css-inline-block-ie7-hack – Stringendo 15/9, 2010 at 14:42

Well, this seems too easy to be true, but I tried it and it worked in FF. IE still displays half the tags on the second line, but it could be a simple fix. All I did was add float: left to the styles for the three tables.

<html>
    <body>
    <style type='text/css'>
     #navlist li{
        display:inline;
        list-style-type:none;
        float: left;

        }
    </style>
        <ul id='navlist'>
            <li>TEST1</li>
            <li>TEST2</li>
            <li>
                <table style='border:1px solid black; float: left;'><tr><td>TEST</td></tr></table>
            </li>
            <li>TEST3</li>
            <li>
                <table style='border:1px solid blue; float: left;'><tr><td>TEST</td></tr></table>
            </li>
            <li>
                <table style='border:1px solid green; float: left;'><tr><td>TEST</td></tr></table>
            </li>
        </ul>
    </body>
    </html>

Glooming answered 15/9, 2010 at 14:29 Comment(1)

Ok, got IE working by adding float: left to the li style as well. – Glooming 15/9, 2010 at 14:33

Yes it's because tables are by default block elements (well, actually display:table but it acts in a similar manner). If your tables are very simple then adding display:inline to them may work.

Otherwise your best bet is to float each list element to the left:

#navlist li {
  float: left;
  list-style-type:none;
}

Aekerly answered 15/9, 2010 at 14:34 Comment(0)

I'd suggest applying a set of drop-down menu type styles to your display, this does carry the disadvantage of complicating your mark-up slightly, but makes it easier to hide/display the tables at appropriate times. It also lets you have larger than one-row/one-cell tables.

If you need them to be visible at all times, though, then this approach isn't applicable. Regardless, I've posted a demo of my suggestion on jsbin.com

Minimize answered 15/9, 2010 at 14:37 Comment(0)

Recommended topics

Hot tags