CODEWITHSUNDEEP
htmlcss
user3142695
user3142695

Reputation: 17332

Display nested list like a table

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/

Upvotes: 0

Views: 1062

Answers (1)

G-Cyrillus
G-Cyrillus

Reputation: 105863

yes, reset sub li display:

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

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

Upvotes: 1

Related Questions