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


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

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

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

运行代码框

[Ctrl+A 全部选择 提示:你可先修改部分代码,再按运行]

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

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

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

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

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

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

运行代码框

[Ctrl+A 全部选择 提示:你可先修改部分代码,再按运行]


« 
» 
快速导航

Copyright © 2016 phpStudy | 豫ICP备2021030365号-3