CODEWITHSUNDEEP
htmlcsshtml-tablehorizontallist
Tim Reynolds
Tim Reynolds

Reputation: 734

Can I put a table in a list item?

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>

Upvotes: 8

Views: 27921

Answers (4)

Chris Heald
Chris Heald

Reputation: 62648

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>

Upvotes: 5

David Thomas
David Thomas

Reputation: 253318

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

Upvotes: 0

DisgruntledGoat
DisgruntledGoat

Reputation: 72530

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;
}

Upvotes: 0

Jeremy Goodell
Jeremy Goodell

Reputation: 18962

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>

Upvotes: 0

Related Questions