Creating HTML table without using a table tag

Question

I'm trying to create a table without using the table tag, only using the display: table properties in CSS. But somehow, the rows are not getting properly aligned. The widths of the cells vary. The cells of the first row have different widths from the cells of the other rows. Here is the JSFiddle for a clear understanding : http://jsfiddle.net/tryouts/3MVUD/

Here is my HTML:

<div class="content">
    <header>
        <span class="title">Title</span>
        <span class="avail">Avail</span>
        <span class="list">List</span>
    </header>
    <main>
       <section id="item-1">
            <span class="title">Item 1</span>
            <span class="avail"></span>
            <span class="list">
                <span>One</span>
                <span>Two</span>
                <span>Three</span>
                <span>Four</span>
            </span>
       </section> 
       <section id="item-2">
            <span class="title">Item 2</span>
            <span class="avail">Yes</span>
            <span class="list">
                <span>Two</span>
                <span>Three</span>
            </span>
       </section> 
       <section id="item-3">
            <span class="title">Item 3</span>
            <span class="avail"></span>
            <span class="list">
            </span>
       </section>         
    </main>
</div>

And here is my CSS:

div.content {
    display: table;
    width: 100%;
    border: 1px solid black;
}

div.content header, div.content main section {
    display: table-row;
    border: 1px solid black;
}

span.title,span.avail,span.list {
    display: table-cell;
    width: 33%;
    border: 1px solid black;
}

I do not want to change the existing HTML content, that's the main reason for using CSS to create a table like structure.

Answer 1

you need to add:

main { display: table-row-group }