Databases
StackOverflow2013
Postsdbo
POStyle a cascade list into table
Body
 

Note that there are some explanatory texts on larger screens.

plurals
  1. POStyle a cascade list into table
    text
    copied!<p>Just asking if there is a way to style a cascade list like this:</p> <pre><code>&lt;ol&gt; &lt;li&gt; &lt;ol&gt; &lt;li&gt;col 1 row 1&lt;/li&gt; &lt;li&gt;column 2 row 1&lt;/li&gt; &lt;/ol&gt; &lt;/li&gt; &lt;li&gt; &lt;ol&gt; &lt;li&gt;column 1 row 2&lt;/li&gt; &lt;li&gt;col 2 row 2&lt;/li&gt; &lt;/ol&gt; &lt;/li&gt; &lt;/ol&gt; </code></pre> <p>into a table like this</p> <pre><code>------------------------------------------------------ |col 1 row 1 |column 2 row 1 | |column 1 row 2 |col 2 row 2 | ------------------------------------------------------ </code></pre> <p>where each row is a horizontal list with the same width</p> <p>I've been experimenting to achieve this, but can only get as close as this</p> <pre><code>------------------------------------------------------ |col 1 row 1 |column 2 row 1 | |column 1 row 2 |col 2 row 2 | ------------------------------------------------------ </code></pre> <p>I can't make each cell the same width. Here is my css</p> <pre><code>ol.question_list { list-style: decimal; width: 100%; } ol.question_list li { clear: both; width: 100%; } ul.choice_list { list-style: none; padding: 0; margin: 0 auto; width: 100%; } ul.choice_list li { display: inline; list-style-type: none; } </code></pre> <p>and here is my sample html</p> <pre><code>&lt;ol class="question_list"&gt; &lt;li&gt; &lt;ul class="choice_list"&gt; &lt;li&gt;abc&lt;/li&gt; &lt;li&gt;defghi&lt;/li&gt; &lt;/ul&gt; &lt;/li&gt; &lt;li&gt; &lt;ul class="choice_list"&gt; &lt;li&gt;abc12345&lt;/li&gt; &lt;li&gt;defghi12345&lt;/li&gt; &lt;/ul&gt; &lt;/li&gt; &lt;/ol&gt; </code></pre> <p>Any ideas will be highly appreciated.</p> <p>I've found the solution, but before I would like to thank for the response in this thread. The solution is like this:</p> <pre><code>ol.row_list { list-style: decimal; padding: 0; margin: 0 auto; width: 100%; } ol.row_list li:after { content: " "; display: block; line-height: 1px; font-size: 1px; clear: both; } ul.col_list { list-style: none; padding: 0; margin: 0 auto; width: 100%; } ul.col_list li { display: block; float: left; width: 8%; margin: 0; padding: 0; } div { display: table; } </code></pre> <p>and the html looks like this</p> <pre><code>&lt;div&gt; &lt;ol class="row_list"&gt; &lt;li&gt; &lt;ul class="col_list"&gt; &lt;li&gt;abc &lt;/li&gt; &lt;li&gt;12345 &lt;/li&gt; &lt;/ul&gt; &lt;/li&gt; &lt;li&gt; &lt;ul class="col_list"&gt; &lt;li&gt;abc12345 &lt;/li&gt; &lt;li&gt;1234567890 &lt;/li&gt; &lt;/ul&gt; &lt;/li&gt; &lt;/ol&gt; &lt;/div&gt; </code></pre>
 

Querying!

 
Guidance
An individual column

Larger individual text columns get their own page to allow for proper reading.

SQuiL has stopped working due to an internal error.

If you are curious you may find further information in the browser console, which is accessible through the devtools (F12).

Reload