Creating an HTML table without using a table tag

Question

I am trying to create a table without using a tag table, only using properties display: tablein CSS. But for some reason, the lines do not align correctly. The widths of the cells change. The cells of the first row have different widths from the cells of 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 don’t want to modify existing HTML content, which is the main reason for using CSS to create a table like structure.

Answer 1

you need to add:

main { display: table-row-group }