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

2024-07-11 08:22:11

字体：大中小

来源：转载

供稿：网友

参与测试的浏览器：ie6 / ie7 / ie8 / ff3 / op9.6 / sf3 / chrome2
操作系统：windows
特别提示：这不是表格的模拟。表格无论在语义、结构，还是在效果实现上，都是无法替代的。本文只针对无序列表在外观方面的一个特殊需求

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

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

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

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

问题1：宽度如何自适应分辨率？
这个问题也许有人说没必要，但是在模块化设计时，几乎任何部件都被要求设置为宽度自适应模式的。

解决1：参考完美的firefox3和ie8百分比宽度处理方案，给剩余的宽度分配给某个“列”，就行了 ^-^
记得二列等高的笨办法吗？——用背景图片模拟。

问题2：单元格内容过多、形成换行如何处理？

解决2：隐藏吧，它已经没有存在的价值了！（ - -! 其实是我想不出别的办法来了）
但为了体验好一点，我加上了text-overflow。这个，ff暂时不支持……aoao有好的解决办法，我也有次点的解决办法。

运行代码框
<!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 { border:1px solid #cfdae8; border-left:none; border-bottom:none; overflow:hidden; background:url(http://www.14px.com/wp-content/uploads/2009/05/1.gif); zoom:1;}li { width:20%; *width:19.9%;/*ie6&ie7的宽度有点点囧*/ float:left;}span { display:block; border-left:1px solid #cfdae8; height:24px; font:12px/24px tahoma; padding:0 4px;}a { white-space:nowrap; display:block; width:100%; overflow:hidden; text-overflow:ellipsis; -o-text-overflow:ellipsis; color:#000; text-decoration:none;}a:hover { color:#f60;}</style></head><body><ul><li><a title="prison break / 越狱" href="#nogo">prison break / 越狱 </a></li><li><a title="gossip girl / 八卦天后" href="#nogo">gossip girl / 八卦天后 </a></li><li><a title="friends / 老友记 / 六人行" href="#nogo">friends / 老友记 / 六人行</a></li><li><a title="heroes / 超能英雄" href="#nogo">heroes / 超能英雄</a></li><li><a title="desperate housewives / 绝望的主妇" href="#nogo">desperate housewives / 绝望的主妇 </a></li><li><a title="sex and the city / 欲望都市" href="#nogo">sex and the city / 欲望都市 </a></li><li><a title="prison break: proof of innocence / 越狱第二季" href="#nogo">prison break: proof of innocence / 越狱第二季</a></li><li><a title="lost / 迷失" href="#nogo">lost / 迷失</a></li><li><a title="grey's anatomy / 实习医生格蕾 / 格蕾的解剖" href="#nogo">grey's anatomy / 实习医生格蕾 / 格蕾的解剖 </a></li><li><a title="lie to me / 千谎百计" href="#nogo">lie to me / 千谎百计 </a></li><li><a title="the big bang theory / 天才理论传 / 生活大爆炸" href="#nogo">the big bang theory / 天才理论传 / 生活大爆炸 </a></li><li><a title="growing pains / 成长的烦恼" href="#nogo">growing pains / 成长的烦恼 </a></li><li><a title="prison break (season 3) / 越狱第三季" href="#nogo">prison break (season 3) / 越狱第三季</a></li><li><a title="house m.d. / 怪杰医生豪斯 / 豪斯医生" href="#nogo">house m.d. / 怪杰医生豪斯 / 豪斯医生 </a></li><li><a title="ugly betty / 丑女贝蒂" href="#nogo">ugly betty / 丑女贝蒂 </a></li><li><a title="gossip girl season2 / 八卦天后第二季" href="#nogo">gossip girl season2 / 八卦天后第二季</a></li><li><a title="csi: crime scene investigation / 犯罪现场：拉斯维加斯" href="#nogo">csi: crime scene investigation / 犯罪现场：拉斯维加斯</a></li><li><a title="heroes(season 2) / 天骄 / 超能英雄" href="#nogo">heroes(season 2) / 天骄 / 超能英雄 </a></li><li><a title="24 / 24反恐部队 / 24小时" href="#nogo">24 / 24反恐部队 / 24小时</a></li><li><a title="cashmere mafia / 女人帮" href="#nogo">cashmere mafia / 女人帮 </a></li></ul> 实际应用的时候，通过对单元文字长度范围的预测、应用区域宽度的结合考虑，可通过调整列数来达到我们想要的效果。</body></html>
[ctrl+a 全部选择提示：你可先修改部分代码，再按运行]

|||

问题3：5×4的表格，如果只有17条数据怎么办？empty-cell也黯然失色…
看这个demo，其实我觉得这个样子不影响阅读，也不难看了，可boss和他的money不乐意。

运行代码框
<!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>表格外观的无序列表 - 5×4的表格，如果只有17条数据怎么办？</title><style type="text/css">* { margin:0; padding:0; list-style:none;}ul { border:1px solid #cfdae8; border-left:none; border-bottom:none; overflow:hidden; background:url(http://www.14px.com/wp-content/uploads/2009/05/1.gif); zoom:1;}li { width:20%; *width:19.9%;/*ie6&ie7的宽度有点点囧*/ float:left;}span { display:block; border-left:1px solid #cfdae8; height:24px; font:12px/24px tahoma; padding:0 4px;}a { white-space:nowrap; display:block; width:100%; overflow:hidden; text-overflow:ellipsis; -o-text-overflow:ellipsis; color:#000; text-decoration:none;}a:hover { color:#f60;}</style></head><body><ul><li><a title="prison break / 越狱" href="#nogo">prison break / 越狱 </a></li><li><a title="gossip girl / 八卦天后" href="#nogo">gossip girl / 八卦天后 </a></li><li><a title="friends / 老友记 / 六人行" href="#nogo">friends / 老友记 / 六人行</a></li><li><a title="heroes / 超能英雄" href="#nogo">heroes / 超能英雄</a></li><li><a title="desperate housewives / 绝望的主妇" href="#nogo">desperate housewives / 绝望的主妇 </a></li><li><a title="sex and the city / 欲望都市" href="#nogo">sex and the city / 欲望都市 </a></li><li><a title="prison break: proof of innocence / 越狱第二季" href="#nogo">prison break: proof of innocence / 越狱第二季</a></li><li><a title="lost / 迷失" href="#nogo">lost / 迷失</a></li><li><a title="grey's anatomy / 实习医生格蕾 / 格蕾的解剖" href="#nogo">grey's anatomy / 实习医生格蕾 / 格蕾的解剖 </a></li><li><a title="lie to me / 千谎百计" href="#nogo">lie to me / 千谎百计 </a></li><li><a title="the big bang theory / 天才理论传 / 生活大爆炸" href="#nogo">the big bang theory / 天才理论传 / 生活大爆炸 </a></li><li><a title="growing pains / 成长的烦恼" href="#nogo">growing pains / 成长的烦恼 </a></li><li><a title="prison break (season 3) / 越狱第三季" href="#nogo">prison break (season 3) / 越狱第三季</a></li><li><a title="house m.d. / 怪杰医生豪斯 / 豪斯医生" href="#nogo">house m.d. / 怪杰医生豪斯 / 豪斯医生 </a></li><li><a title="ugly betty / 丑女贝蒂" href="#nogo">ugly betty / 丑女贝蒂 </a></li><li><a title="gossip girl season2 / 八卦天后第二季" href="#nogo">gossip girl season2 / 八卦天后第二季</a></li><li><a title="csi: crime scene investigation / 犯罪现场：拉斯维加斯" href="#nogo">csi: crime scene investigation / 犯罪现场：拉斯维加斯</a></li></ul> 其实我觉得这个样子不影响阅读，也不难看了，可boss和他的money不乐意。</body></html>
[ctrl+a 全部选择提示：你可先修改部分代码，再按运行]

解决3：
首先让我们制造出我们想要的表格（很遗憾，制造了很多空标签，暂时没有找到更合适的纯css解决方案，欢迎大家多多指点）。

运行代码框
<!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 { border:1px solid #cfdae8; border-left:none; border-bottom:none; overflow:hidden; background:url(http://www.14px.com/wp-content/uploads/2009/05/1.gif); zoom:1;}li { width:20%; *width:19.9%;/*ie6&ie7的宽度有点点囧*/ float:left;}span { display:block; border-left:1px solid #cfdae8; height:24px; font:12px/24px tahoma; padding:0 4px;}a { white-space:nowrap; display:block; width:100%; overflow:hidden; text-overflow:ellipsis; -o-text-overflow:ellipsis; color:#000; text-decoration:none;}a:hover { color:#f60;}</style></head><body><ul><li></li><li></li><li></li><li></li><li></li><li><a title="prison break / 越狱" href="#nogo">prison break / 越狱 </a></li><li><a title="gossip girl / 八卦天后" href="#nogo">gossip girl / 八卦天后 </a></li><li><a title="friends / 老友记 / 六人行" href="#nogo">friends / 老友记 / 六人行</a></li><li><a title="heroes / 超能英雄" href="#nogo">heroes / 超能英雄</a></li><li><a title="desperate housewives / 绝望的主妇" href="#nogo">desperate housewives / 绝望的主妇 </a></li><li><a title="sex and the city / 欲望都市" href="#nogo">sex and the city / 欲望都市 </a></li><li><a title="prison break: proof of innocence / 越狱第二季" href="#nogo">prison break: proof of innocence / 越狱第二季</a></li><li><a title="lost / 迷失" href="#nogo">lost / 迷失</a></li><li><a title="grey's anatomy / 实习医生格蕾 / 格蕾的解剖" href="#nogo">grey's anatomy / 实习医生格蕾 / 格蕾的解剖 </a></li><li><a title="lie to me / 千谎百计" href="#nogo">lie to me / 千谎百计 </a></li><li><a title="the big bang theory / 天才理论传 / 生活大爆炸" href="#nogo">the big bang theory / 天才理论传 / 生活大爆炸 </a></li><li><a title="growing pains / 成长的烦恼" href="#nogo">growing pains / 成长的烦恼 </a></li><li><a title="prison break (season 3) / 越狱第三季" href="#nogo">prison break (season 3) / 越狱第三季</a></li><li><a title="house m.d. / 怪杰医生豪斯 / 豪斯医生" href="#nogo">house m.d. / 怪杰医生豪斯 / 豪斯医生 </a></li><li><a title="ugly betty / 丑女贝蒂" href="#nogo">ugly betty / 丑女贝蒂 </a></li><li><a title="gossip girl season2 / 八卦天后第二季" href="#nogo">gossip girl season2 / 八卦天后第二季</a></li><li><a title="csi: crime scene investigation / 犯罪现场：拉斯维加斯" href="#nogo">csi: crime scene investigation / 犯罪现场：拉斯维加斯</a></li></ul> 很遗憾，制造了很多空标签，暂时没有找到更合适的纯css解决方案，欢迎大家多多指点。</body></html>
[ctrl+a 全部选择提示：你可先修改部分代码，再按运行]

然后用position:relative实现css移魂大法：

运行代码框
<!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>表格外观的无序列表 - 用position:relative实现css移魂大法</title><style type="text/css">* { margin:0; padding:0; list-style:none;}ul { border:1px solid #cfdae8; border-left:none; border-bottom:none; overflow:hidden; background:url(http://www.14px.com/wp-content/uploads/2009/05/1.gif); zoom:1;}li { width:20%; *width:19.9%;/*ie6&ie7的宽度有点点囧*/ float:left;}span { display:block; border-left:1px solid #cfdae8; height:24px; font:12px/24px tahoma; padding:0 4px;}a { white-space:nowrap; display:block; width:100%; overflow:hidden; text-overflow:ellipsis; -o-text-overflow:ellipsis; color:#000; text-decoration:none; position:relative; top:-24px;}a:hover { color:#f60;}</style></head><body><ul><li></li><li></li><li></li><li></li><li></li><li><a title="prison break / 越狱" href="#nogo">prison break / 越狱 </a></li><li><a title="gossip girl / 八卦天后" href="#nogo">gossip girl / 八卦天后 </a></li><li><a title="friends / 老友记 / 六人行" href="#nogo">friends / 老友记 / 六人行</a></li><li><a title="heroes / 超能英雄" href="#nogo">heroes / 超能英雄</a></li><li><a title="desperate housewives / 绝望的主妇" href="#nogo">desperate housewives / 绝望的主妇 </a></li><li><a title="sex and the city / 欲望都市" href="#nogo">sex and the city / 欲望都市 </a></li><li><a title="prison break: proof of innocence / 越狱第二季" href="#nogo">prison break: proof of innocence / 越狱第二季</a></li><li><a title="lost / 迷失" href="#nogo">lost / 迷失</a></li><li><a title="grey's anatomy / 实习医生格蕾 / 格蕾的解剖" href="#nogo">grey's anatomy / 实习医生格蕾 / 格蕾的解剖 </a></li><li><a title="lie to me / 千谎百计" href="#nogo">lie to me / 千谎百计 </a></li><li><a title="the big bang theory / 天才理论传 / 生活大爆炸" href="#nogo">the big bang theory / 天才理论传 / 生活大爆炸 </a></li><li><a title="growing pains / 成长的烦恼" href="#nogo">growing pains / 成长的烦恼 </a></li><li><a title="prison break (season 3) / 越狱第三季" href="#nogo">prison break (season 3) / 越狱第三季</a></li><li><a title="house m.d. / 怪杰医生豪斯 / 豪斯医生" href="#nogo">house m.d. / 怪杰医生豪斯 / 豪斯医生 </a></li><li><a title="ugly betty / 丑女贝蒂" href="#nogo">ugly betty / 丑女贝蒂 </a></li><li><a title="gossip girl season2 / 八卦天后第二季" href="#nogo">gossip girl season2 / 八卦天后第二季</a></li><li><a title="csi: crime scene investigation / 犯罪现场：拉斯维加斯" href="#nogo">csi: crime scene investigation / 犯罪现场：拉斯维加斯</a></li></ul></body></html>
[ctrl+a 全部选择提示：你可先修改部分代码，再按运行]

|||

最后让我们隐藏多余的那一行：

运行代码框
<!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;}div { overflow:hidden; zoom:1;}ul { border:1px solid #cfdae8; border-left:none; border-bottom:none; overflow:hidden; background:url(http://www.14px.com/wp-content/uploads/2009/05/1.gif); zoom:1; margin-bottom:-24px;}li { width:20%; *width:19.9%;/*ie6&ie7的宽度有点点囧*/ float:left;}span { display:block; border-left:1px solid #cfdae8; height:24px; font:12px/24px tahoma; padding:0 4px;}a { white-space:nowrap; display:block; width:100%; overflow:hidden; text-overflow:ellipsis; -o-text-overflow:ellipsis; color:#000; text-decoration:none; position:relative; top:-24px;}a:hover { color:#f60;}</style></head><body><div><ul><li></li><li></li><li></li><li></li><li></li><li><a title="prison break / 越狱" href="#nogo">prison break / 越狱 </a></li><li><a title="gossip girl / 八卦天后" href="#nogo">gossip girl / 八卦天后 </a></li><li><a title="friends / 老友记 / 六人行" href="#nogo">friends / 老友记 / 六人行</a></li><li><a title="heroes / 超能英雄" href="#nogo">heroes / 超能英雄</a></li><li><a title="desperate housewives / 绝望的主妇" href="#nogo">desperate housewives / 绝望的主妇 </a></li><li><a title="sex and the city / 欲望都市" href="#nogo">sex and the city / 欲望都市 </a></li><li><a title="prison break: proof of innocence / 越狱第二季" href="#nogo">prison break: proof of innocence / 越狱第二季</a></li><li><a title="lost / 迷失" href="#nogo">lost / 迷失</a></li><li><a title="grey's anatomy / 实习医生格蕾 / 格蕾的解剖" href="#nogo">grey's anatomy / 实习医生格蕾 / 格蕾的解剖 </a></li><li><a title="lie to me / 千谎百计" href="#nogo">lie to me / 千谎百计 </a></li><li><a title="the big bang theory / 天才理论传 / 生活大爆炸" href="#nogo">the big bang theory / 天才理论传 / 生活大爆炸 </a></li><li><a title="growing pains / 成长的烦恼" href="#nogo">growing pains / 成长的烦恼 </a></li><li><a title="prison break (season 3) / 越狱第三季" href="#nogo">prison break (season 3) / 越狱第三季</a></li><li><a title="house m.d. / 怪杰医生豪斯 / 豪斯医生" href="#nogo">house m.d. / 怪杰医生豪斯 / 豪斯医生 </a></li><li><a title="ugly betty / 丑女贝蒂" href="#nogo">ugly betty / 丑女贝蒂 </a></li><li><a title="gossip girl season2 / 八卦天后第二季" href="#nogo">gossip girl season2 / 八卦天后第二季</a></li><li><a title="csi: crime scene investigation / 犯罪现场：拉斯维加斯" href="#nogo">csi: crime scene investigation / 犯罪现场：拉斯维加斯</a></li></ul></div></body></html>
[ctrl+a 全部选择提示：你可先修改部分代码，再按运行]

解决3很抽搐，在birdstudio的帮助下找到了新的方法，这方法不用加空标签。

原理单用文字描述太复杂了，也不能描述得很清楚，自己看源码吧，关键在li的高度与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>表格外观的无序列表 - 不用加空标签了，真美好，谢谢birdstudio的思路</title><style type="text/css">* { margin:0; padding:0; list-style:none;}div { overflow:hidden; zoom:1; position:relative;}ul { border:1px solid #cfdae8; border-left:none; border-bottom:none; overflow:hidden; background:url(http://www.14px.com/wp-content/uploads/2009/05/1.gif); zoom:1; margin-bottom:-24px; padding-top:24px;}li { width:20%; *width:19.9%;/*ie6&ie7的宽度有点点囧*/ float:left; margin-top:-24px; height:48px; position:relative;}span { display:block; border-left:1px solid #cfdae8; height:48px; font:12px/24px tahoma; padding:0 4px;}a { white-space:nowrap; display:block; width:100%; overflow:hidden; text-overflow:ellipsis; -o-text-overflow:ellipsis; color:#000; text-decoration:none; position:relative; }a:hover { color:#f60;}</style></head><body><div><ul><li><a title="prison break / 越狱" href="#nogo">prison break / 越狱 </a></li><li><a title="gossip girl / 八卦天后" href="#nogo">gossip girl / 八卦天后 </a></li><li><a title="friends / 老友记 / 六人行" href="#nogo">friends / 老友记 / 六人行</a></li><li><a title="heroes / 超能英雄" href="#nogo">heroes / 超能英雄</a></li><li><a title="desperate housewives / 绝望的主妇" href="#nogo">desperate housewives / 绝望的主妇 </a></li><li><a title="sex and the city / 欲望都市" href="#nogo">sex and the city / 欲望都市 </a></li><li><a title="prison break: proof of innocence / 越狱第二季" href="#nogo">prison break: proof of innocence / 越狱第二季</a></li><li><a title="lost / 迷失" href="#nogo">lost / 迷失</a></li><li><a title="grey's anatomy / 实习医生格蕾 / 格蕾的解剖" href="#nogo">grey's anatomy / 实习医生格蕾 / 格蕾的解剖 </a></li><li><a title="lie to me / 千谎百计" href="#nogo">lie to me / 千谎百计 </a></li><li><a title="the big bang theory / 天才理论传 / 生活大爆炸" href="#nogo">the big bang theory / 天才理论传 / 生活大爆炸 </a></li><li><a title="growing pains / 成长的烦恼" href="#nogo">growing pains / 成长的烦恼 </a></li><li><a title="prison break (season 3) / 越狱第三季" href="#nogo">prison break (season 3) / 越狱第三季</a></li><li><a title="house m.d. / 怪杰医生豪斯 / 豪斯医生" href="#nogo">house m.d. / 怪杰医生豪斯 / 豪斯医生 </a></li><li><a title="ugly betty / 丑女贝蒂" href="#nogo">ugly betty / 丑女贝蒂 </a></li><li><a title="gossip girl season2 / 八卦天后第二季" href="#nogo">gossip girl season2 / 八卦天后第二季</a></li><li><a title="csi: crime scene investigation / 犯罪现场：拉斯维加斯" href="#nogo">csi: crime scene investigation / 犯罪现场：拉斯维加斯</a></li></ul></div> 不用加空标签了，真美好，谢谢birdstudio的思路</body></html>
[ctrl+a 全部选择提示：你可先修改部分代码，再按运行]

上一篇：CSS教程:让IE6支持position:fixed

下一篇：替换和不可替换元素以及显示元素