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 }

不使用表标记创建HTML表

1 个答案: