別看有的東東長(zhǎng)得個(gè)表格樣,其實(shí)是披著表格皮的無(wú)序列表,為了偉大的語(yǔ)義,我們需要用css實(shí)現(xiàn)表格外觀的無(wú)序列表。
個(gè)人喜好,這里采用border和negative margin來(lái)實(shí)現(xiàn),非常簡(jiǎn)單:
運(yùn)行代碼框
[ctrl+a 全部選擇 提示:你可先修改部分代碼,再按運(yùn)行]
這是一個(gè)最簡(jiǎn)單的模型,然而,實(shí)戰(zhàn)總是殘酷的:
問(wèn)題1:寬度如何自適應(yīng)分辨率?
這個(gè)問(wèn)題也許有人說(shuō)沒(méi)必要,但是在模塊化設(shè)計(jì)時(shí),幾乎任何部件都被要求設(shè)置為寬度自適應(yīng)模式的。
解決1:參考完美的firefox3和ie8百分比寬度處理方案,給剩余的寬度分配給某個(gè)“列”,就行了 ^-^
記得二列等高的笨辦法嗎?——用背景圖片模擬。
問(wèn)題2:?jiǎn)卧駜?nèi)容過(guò)多、形成換行如何處理?
解決2:隱藏吧,它已經(jīng)沒(méi)有存在的價(jià)值了!( - -! 其實(shí)是我想不出別的辦法來(lái)了)
但為了體驗(yàn)好一點(diǎn),我加上了text-overflow。這個(gè),ff暫時(shí)不支持……aoao有好的解決辦法,我也有次點(diǎn)的解決辦法。
運(yùn)行代碼框
[ctrl+a 全部選擇 提示:你可先修改部分代碼,再按運(yùn)行]
|||
問(wèn)題3:5×4的表格,如果只有17條數(shù)據(jù)怎么辦?empty-cell也黯然失色…
看這個(gè)demo,其實(shí)我覺(jué)得這個(gè)樣子不影響閱讀,也不難看了,可boss和他的money不樂(lè)意。
運(yùn)行代碼框
[ctrl+a 全部選擇 提示:你可先修改部分代碼,再按運(yùn)行]
解決3:
首先讓我們制造出我們想要的表格(很遺憾,制造了很多空標(biāo)簽,暫時(shí)沒(méi)有找到更合適的純css解決方案,歡迎大家多多指點(diǎn))。
運(yùn)行代碼框
[ctrl+a 全部選擇 提示:你可先修改部分代碼,再按運(yùn)行]
然后用position:relative實(shí)現(xiàn)css移魂大法:
運(yùn)行代碼框
[ctrl+a 全部選擇 提示:你可先修改部分代碼,再按運(yùn)行]
|||
最后讓我們隱藏多余的那一行:
運(yùn)行代碼框
[ctrl+a 全部選擇 提示:你可先修改部分代碼,再按運(yùn)行]
解決3很抽搐,在birdstudio的幫助下找到了新的方法,這方法不用加空標(biāo)簽。
原理單用文字描述太復(fù)雜了,也不能描述得很清楚,自己看源碼吧,關(guān)鍵在li的高度與margin的設(shè)置上,多余的部分也隱藏了。
運(yùn)行代碼框
[ctrl+a 全部選擇 提示:你可先修改部分代碼,再按運(yùn)行]
新聞熱點(diǎn)
疑難解答
圖片精選