DIV CSS 佈局教程網

 DIV+CSS佈局教程網 >> 網頁腳本 >> CSS入門知識 >> CSS進階教程 >> 用css實現表格外觀的無序列表
用css實現表格外觀的無序列表
編輯:CSS進階教程     

網頁制作poluoluo文章簡介:別看有的東東長得個表格樣,其實是披著表格皮的無序列表,為了偉大的語義,我們需要用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 全部選擇 提示:你可先修改部分代碼,再按運行]

網頁制作poluoluo文章簡介:別看有的東東長得個表格樣,其實是披著表格皮的無序列表,為了偉大的語義,我們需要用css實現表格外觀的無序列表。

問題3:5×4的表格,如果只有17條數據怎麼辦?empty-cell也黯然失色…
看這個Demo,其實我覺得這個樣子不影響閱讀,也不難看了,可Boss和他的Money不樂意。

運行代碼框

[Ctrl+A 全部選擇 提示:你可先修改部分代碼,再按運行]

解決3
首先讓我們制造出我們想要的表格(很遺憾,制造了很多空標簽,暫時沒有找到更合適的純CSS解決方案,歡迎大家多多指點)。

運行代碼框

[Ctrl+A 全部選擇 提示:你可先修改部分代碼,再按運行]

然後用position:relative實現css移魂大法:

運行代碼框

[Ctrl+A 全部選擇 提示:你可先修改部分代碼,再按運行]

網頁制作poluoluo文章簡介:別看有的東東長得個表格樣,其實是披著表格皮的無序列表,為了偉大的語義,我們需要用css實現表格外觀的無序列表。

最後讓我們隱藏多余的那一行:

運行代碼框

[Ctrl+A 全部選擇 提示:你可先修改部分代碼,再按運行]

解決3很抽搐,在birdstudio的幫助下找到了新的方法,這方法不用加空標簽。

原理單用文字描述太復雜了,也不能描述得很清楚,自己看源碼吧,關鍵在li的高度與margin的設置上,多余的部分也隱藏了。

運行代碼框

[Ctrl+A 全部選擇 提示:你可先修改部分代碼,再按運行]

XML學習教程| jQuery入門知識| AJAX入門| Dreamweaver教程| Fireworks入門知識| SEO技巧| SEO優化集錦|
Copyright © DIV+CSS佈局教程網 All Rights Reserved