不使用表标记创建HTML表

概述我正在尝试创建一个不使用表标记的表,只使用CSS中的display：table属性.但不知何故,行没有正确对齐.细胞的宽度不同.第一行的单元格与其他行的单元格具有不同的宽度. 这是JSFiddle的清晰理解： http://jsfiddle.net/tryouts/3MVUD/ 这是我的HTML： <div class="content"> <header> <span c 我正在尝试创建一个不使用表标记的表,只使用CSS中的display：table属性.但不知何故,行没有正确对齐.细胞的宽度不同.第一行的单元格与其他行的单元格具有不同的宽度.
这是Jsfiddle的清晰理解： http://jsfiddle.net/tryouts/3MVUD/

这是我的HTML：

<div >    <header>        <span >Title</span>        <span >Avail</span>        <span >List</span>    </header>    <main>       <section ID="item-1">            <span >Item 1</span>            <span ></span>            <span >                <span>One</span>                <span>Two</span>                <span>Three</span>                <span>Four</span>            </span>       </section>        <section ID="item-2">            <span >Item 2</span>            <span >Yes</span>            <span >                <span>Two</span>                <span>Three</span>            </span>       </section>        <section ID="item-3">            <span >Item 3</span>            <span ></span>            <span >            </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创建类似结构的表的主要原因.

解决方法 你需要添加：

main { display: table-row-group }

总结

以上是内存溢出为你收集整理的不使用表标记创建HTML表全部内容，希望文章能够帮你解决不使用表标记创建HTML表所遇到的程序开发问题。

如果觉得内存溢出网站内容还不错，欢迎将内存溢出网站推荐给程序员好友。