用DIV做表格 972.

发表于： 2020年9月2日 2020年9月2日
分类： HTML
标签： div, HTML, 表格

这个纯粹当来玩吧。实际实践还是建议大家用table搞定。

CSS：

*{margin:0 auto; padding:0px;list-style:none;}
.e{width:500px; border-top:solid #f00 1px; border-left:1px solid #f00; display:table; margin-top:50px;}
li{float:left;}
.id,.name,.x,.z,.d{color:#999;font-size:12px; text-align:center; border-right:1px solid #f00; border-bottom:1px solid #f00; height:22px; line-height:22px;}
.id{width:20px;}
.name{width:50px;}
.x{width:30px;}
.z{width:30px;}
.d{width:365px;}

HTML：

<div class="e">
<ul>
<li class="id">ID</li>
<li class="name">名字</li>
<li class="x">性别</li>
<li class="z">年龄</li>
<li class="d">地址</li>
</ul>
<ul>
<li class="id">1</li>
<li class="name">复制</li>
<li class="x">女</li>
<li class="z">20?</li>
<li class="d">北京</li>
</ul>
<ul>
<li class="id">2</li>
<li class="name">小曾</li>
<li class="x">男</li>
<li class="z">22?</li>
<li class="d">上海</li>
</ul>
<ul>
<li class="id">3</li>
<li class="name">单单</li>
<li class="x">女</li>

效果：

ally