用css实现表格外观的无序列表

作者佚名技术来源 CSS技术浏览发布时间 2012-03-02

参与测试的浏览器：IE6 / IE7 / IE8 / FF3 / OP9.6 / SF3 / Chrome2
操作系统：Windows
特别提示：这不是表格的模拟。表格无论在语义、结构，还是在效果实现上，都是无法替代的。本文只针对无序列表在外观方面的一个特殊需求

别看有的东东长得个表格样，其实是披着表格皮的无序列表，为了伟大的语义，我们需要用css实现表格外观的无序列表。

个人喜好，这里采用border和negative margin来实现，非常简单：

运行代码框
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <meta name="author" content="Chomo" /> <link rel="start" href="http://www.14px.com" title="Home" /> <title>表格外观的无序列表 - 原始状态</title> <style type="text/css"> * { margin:0; padding:0; list-style:none;} ul { margin-left:1px; margin-top:1px; width:505px;} li { float:left; height:23px; border:1px solid #cfdae8; width:100px; margin-left:-1px; margin-top:-1px;} </style> </head> <body> <ul> <li></li> <li></li> <li></li> <li></li> <li></li> <li></li> <li></li> <li></li> <li></li> <li></li> <li></li> <li></li> <li></li> <li></li> <li></li> <li></li> <li></li> <li></li> <li></li> <li></li> </ul> <br /><br />像一个表格吧？ ^-^ </body> </html>
[Ctrl+A 全部选择提示：你可先修改部分代码，再按运行]

这是一个最简单的模型，然而，实战总是残酷的：

宽度如何自适应分辨率？
单元格内容过多、形成换行如何处理？
最纠结的问题：5×4的表格，如果只有17条数据怎么办？empty-cell也黯然失

凌众科技专业提供服务器租用、服务器托管、企业邮局、虚拟主机等服务，公司网站：http://www.lingzhong.cn 为了给广大客户了解更多的技术信息，本技术文章收集来源于网络,凌众科技尊重文章作者的版权，如果有涉及你的版权有必要删除你的文章，请和我们联系。以上信息与文章正文是不可分割的一部分,如果您要转载本文章,请保留以上信息，谢谢!

1 2 3 下一页

分享到：更多

你可能对下面的文章感兴趣

关于用css实现表格外观的无序列表的所有评论

随机推荐