您的位置：首页 > 其它

一个用 dl dt dd 做的表格

2012-02-22 11:12 204 查看
看到最近大家流行用dl dt dd布局，我也能照着做了一个，反照表格做的，效果如图：

代码贴出来给大家看看

<html>

<head>

<title></title>

<style type="text/css">

dl,div{width:800px;margin:0 auto; text-align:center;}

dt{clear:both;text-align:center;font-weight: bold;}

dd{float: left;width:125px;text-align: center;height: auto;padding: 5px 0;border:solid 1px #963;margin:0px;}

body {font-size:12px;margin:0px;padding:0px;background:#eee;}

.title{text-align:center;font-size:14px;font-weight:bold;color:#631;}

</style>

</head>

<body>

<br />

<div><h3>亲们，没有搞错，这是一个用 dl dt dd 做的表格</h3></div>

<dl>

<dd class="title">名称</dd><dd class="title">花费金额</dd><dd class="title">备注</dd><dd class="title">记录时间</dd><dd class="title">记录人</dd><dd class="title">签名</dd>

<dt></dt>

<dd>计算机消费系统</dd> <dd>计算机消费系统</dd> <dd>计算机消费系统</dd> <dd>计算机消费系统</dd> <dd>计算机消费系统</dd> <dd>计算机消费系统</dd>

<dt></dt>

<dd>计算机消费系统</dd> <dd>计算机消费系统</dd> <dd>计算机消费系统</dd> <dd>计算机消费系统</dd> <dd>计算机消费系统</dd> <dd>计算机消费系统</dd>

<dt></dt>

<dd>计算机消费系统</dd> <dd>计算机消费系统</dd> <dd>计算机消费系统</dd> <dd>计算机消费系统</dd> <dd>计算机消费系统</dd> <dd>计算机消费系统</dd>

<dt></dt>

</dl>

</body>

</html>

没什么好解释了，亲们懂得。请注意行高，火狐跟IE解析不一样，建议用Padding和margin。
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 点击这里给我发消息
标签： 
相关文章推荐
新的分享
章节导航