不使用表标记创建HTML表

Question

我正在尝试创建一个不使用table标记的表,只使用display: tableCSS中的属性.但不知何故,行没有正确对齐.细胞的宽度不同.第一行的单元格与其他行的单元格具有不同的宽度.这是JSFiddle的清晰理解:http://jsfiddle.net/tryouts/3MVUD/

这是我的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>

这是我的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;
}

我不想更改现有的HTML内容,这是使用CSS创建类似结构的表的主要原因.

Answer 1

你需要添加:

main { display: table-row-group }