Display nested list like a table

Question

There is a nested list, which looks like this:

Main-Title
    Title 1
        Element 1
        Element 2
        Element 3
    Title 2
        Element 4

HTML

<ul>
    <li>Main Title
        <ul>
            <li>Title 1
                <ul>
                    <li>Element 1</li>
                    <li>Element 2</li>
                    <li>Element 3</li>
                </ul>
            </li>
            <li>Title 2
                <ul>
                    <li>Element 4</li>
                </ul>
            </li>
        </ul>
    </li>
</ul>

Is it possible to display the list with CSS like this or do I have to change the HTML markup?

Main Title      Title 1     Element 1
                            Element 2
                            Element 3

                Title 2     Element 4

This looks more like a table with rowspan. I tried to do that with inline-flex:

CSS

li {
    display: inline-flex;
}

But that doesn't work properly. Also there would be multiple elements like main title and so on.. the width of the 'cells' should be fixed.

JSFiddle: https://jsfiddle.net/mkc4uh9y/1/

This doesn't work for Safari.

And the list should be continued for multiple main elements. Here it will displayed to the right: https://jsfiddle.net/mkc4uh9y/4/

G-Cyrillus · Accepted Answer · 2016-01-30 15:48:22Z

1

yes, reset sub li display:

li {
  display: inline-flex;
}
li li {
  display:flex;
}

https://jsfiddle.net/mkc4uh9y/2/

answered Jan 30, 2016 at 15:48

G-Cyrillus

107k14 gold badges116 silver badges135 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

zgood Over a year ago

@user3142695 you need the -webkit- prefix version? display: -webkit-flex;

user3142695 Over a year ago

Oops... dIdn't think about that. You are right. But one more thing. If there are multiple main elements they aren't display correctly, as they are displayed next to each other (horizontally): jsfiddle.net/mkc4uh9y/6

G-Cyrillus Over a year ago

@user3142695 is this what you mean ? jsfiddle.net/mkc4uh9y/10 codepen.io/gc-nomade/pen/QyxOee codepen uses either autoprefixer or prefixfree to generate prefix-vendor where needed, you should use this tools too ;)

Collectives™ on Stack Overflow

Display nested list like a table

1 Answer 1

3 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

3 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related