Dan Rosenstark
Dan Rosenstark

Reputation: 69787

Making Tables Out of Hierarchical Lists in CSS

This should be easy, or perhaps impossible :)

I have this kind of HTML output

<ul>
   <li>one</li>
   <li>two
      <ul>
          <li>a</li>
          <li>b</li>
      </ul>
   </li>
   <li>three</li>
</ul>

and I would like it to appear as

one two three
    a   b 

how can I do this with pure CSS? I can modify the HTML to some extent if necessary (but I would rather not).

Upvotes: 0

Views: 589

Answers (4)

Dan Rosenstark
Dan Rosenstark

Reputation: 69787

To take Zac's answer a little further, you can do the CSS addressing without modifying the HTML whatsoever. Then it would look like this:

<style>
ul li { list-style-type: none; display: inline; float: left; margin: 0 4px;}
ul  {position: absolute; top: 0; left: 0;}
ul li ul li ul{ list-style-type: none; display: inline; float: left;position: absolute; top: 20px; left: 0; margin-top: 30px;}
ul li ul {position: absolute; top: 20; left: 0;}
</style>

<ul>
   <li>one</li>
   <li>two
      <ul>
          <li>a</li>
          <li>b</li>
      </ul>
   </li>
   <li>three</li>
</ul>

Upvotes: 0

Zac
Zac

Reputation: 12856

You could accomplish this with some floats and absolute positioning

ul li { list-style-type: none; display: inline; float: left; margin: 0 4px;}
ul.first {position: absolute; top: 0; left: 0;}
ul li ul li ul{ list-style-type: none; display: inline; float: left;position: absolute; top: 30px; left: 0; margin-top: 30px;}
ul.second {position: absolute; top: 30; left: 50;}

and

<ul class="first">
   <li>one</li>
   <li>two
      <ul class="second">
          <li>a</li>
          <li>b</li>
      </ul>
   </li>
   <li>three</li>
</ul>

Upvotes: 1

chotchki
chotchki

Reputation: 4343

You can use the css tag "list-style-type:none" ie

ul li { list-style-type: none; display: inline; }

ul li ul li { list-style-type: none; display: inline; }

Upvotes: 0

Joel Coehoorn
Joel Coehoorn

Reputation: 416179

You're asking about "pure" CSS. Pure CSS is to use the best semantic tag for the job, and that means that if you really have tabular data, which this looks like it might be, than you should use a table.

Upvotes: 4

Related Questions