Dreamweaver教程 FrontPage教程 Flash教程
  • CSS教程
  • javascript教程
    当前位置:教程 > 网页制作 > CSS教程 > 正文

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

    编辑:教程网 来源:网络 时间:2011年06月30日 15:41
    参与测试的浏览器:IE6 / IE7 / IE8 / FF3 / OP9.6 / SF3 / Chrome2 操作系统:Windows 特别提示:这不是表格的模拟。表格无论在语义、结构,还是在效果实现上,都是无法替代的。本文只针对无序列表在外观方面的一个特殊需求

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

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

    运行代码框

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

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

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

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

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

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

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

    运行代码框