Cascading Table Style

Question

Just ask if there is a way to create a cascading list as follows:

<ol>
    <li>
        <ol>
            <li>col 1 row 1</li>
            <li>column 2 row 1</li>
        </ol>
    </li>
    <li>
        <ol>
            <li>column 1 row 2</li>
            <li>col 2 row 2</li>
        </ol>
    </li>
</ol>

into a table like this

------------------------------------------------------
|col 1 row 1               |column 2 row 1           |
|column 1 row 2            |col 2 row 2              |
------------------------------------------------------

where each row is a horizontal list with the same width

I experimented to achieve this, but I can only get closer to this

------------------------------------------------------
|col 1 row 1 |column 2 row 1                         |
|column 1 row 2 |col 2 row 2                         |
------------------------------------------------------

I can not make each cell equal width. Here is my css

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;
}

and here is my html example

<ol class="question_list">
    <li>
        <ul class="choice_list">
            <li>abc</li>
            <li>defghi</li>
        </ul>
    </li>
    <li>
        <ul class="choice_list">
            <li>abc12345</li>
            <li>defghi12345</li>
        </ul>
    </li>
</ol>

Any ideas would be highly appreciated.

I found a solution, but before I would like to thank you for the answer in this thread. The solution is this:

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;
}

and html looks like this:

<div>
    <ol class="row_list">
        <li>
            <ul class="col_list">
                <li>abc
                </li>
                <li>12345
                </li>
            </ul>
        </li>
        <li>
            <ul class="col_list">
                <li>abc12345
                </li>
                <li>1234567890
                </li>
            </ul>
        </li>
    </ol>
</div>

Answer 1

.question_list {
    min-height: 10px; //clear float
}


.question_list li {
    display: block;
    float: left;
    width: 50%;
}

try it?

Answer 2

CSS

ol,ul,li{
    padding:0;
    margin:0;
}
.question_list {
    list-style-type:none;
}

.choice_list li {
    float:left;
    list-style-type:none;
    width:50%;
}

HTML

<ol class="question_list">
    <li>
        <ul class="choice_list">
            <li>abc</li>
            <li>defghi</li>
            <br style="clear:both;" />
        </ul>
    </li>
    <li>
        <ul class="choice_list">
            <li>abc12345</li>
            <li>defghi12345</li>
            <br style="clear:both;" />
        </ul>
    </li>
</ol>