html - 不使用表格标签创建 HTML 表格

Question

我试图在不使用 table 标签的情况下创建一个表格，仅使用 CSS 中的 display: table 属性。但不知何故，行没有正确对齐。单元格的宽度不同。第一行的单元格与其他行的单元格具有不同的宽度。 这里是 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 }