Показать вложен список как таблица

Question

Существует вложенный список, который выглядит следующим образом:

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> 

Можно ли отобразить список с помощью CSS, как это или сделать Мне нужно изменить разметку HTML?

Main Title  Title 1  Element 1 
          Element 2 
          Element 3 

       Title 2  Element 4 

Это больше похоже на стол с рядами. Я пытался сделать это с инлайн-Flex:

CSS

li { 
    display: inline-flex; 
} 

Но это не работает должным образом. Также было бы несколько элементов, таких как главный заголовок и т. Д.. Ширина «ячеек» должна быть исправлена.

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

Это не работает для Safari.

И список должен быть продолжен для нескольких основных элементов. Здесь будет отображаться справа: https://jsfiddle.net/mkc4uh9y/4/

Answer 1

да, сброс к югу Li дисплей:

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

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