參與測試的瀏覽器：IE6 / IE7 / IE8 / FF3 / OP9.6 / SF3 / Chrome2
操作系統：Windows
特別提示：這不是表格的模擬。表格無論在語義、結構，還是在效果實現上，都是無法替代的。本文只針對無序列表在外觀方面的一個特殊需求。
別看有的東東長得個表格樣，其實是披著表格皮的無序列表，為了偉大的語義，我們需要用css實現表格外觀的無序列表。
個人喜好，這裡採用border和negative margin來實現，非常簡單：
這是一個最簡單的模型，然而，實戰總是殘酷的：
1、寬度如何自適應分辨率？
2、單元格內容過多、形成換行如何處理？
3、最糾結的問題：5×4的表格，如果只有17條數據怎麼辦？empty-cell也黯然失色…
問題1：寬度如何自適應分辨率？
這個問題也許有人說沒必要，但是在模塊化設計時，幾乎任何部件都被要求設置為寬度自適應模式的。
解決1：參考完美的firefox3和ie8百分比寬度處理方案，給剩餘的寬度分配給某個「列」，就行了 ^-^
記得二列等高的笨辦法嗎？——用背景圖片模擬。
問題2：單元格內容過多、形成換行如何處理？
解決2：隱藏吧，它已經沒有存在的價值了！（ - -! 其實是我想不出別的辦法來了）
但為了體驗好一點，我加上了text-overflow。這個，FF暫時不支持……
aoao有好的解決辦法，
其他點的解決辦法。
問題3：5×4的表格，如果只有17條數據怎麼辦？empty-cell也黯然失色…
看這個Demo，其實我覺得這個樣子不影響閱讀，也不難看了，可Boss和他的Money不樂意。
解決3：首先讓我們製造出我們想要的表格（很遺憾，製造了很多空標籤，暫時沒有找到更合適的純CSS解決方案，歡迎大家多多指點）。
然後用position:relative實現css移魂大法：
最後讓我們隱藏多餘的那一行：
解決3很抽搐，在birdstudio的幫助下找到了新的方法，這方法不用加空標籤。
原理單用文字描述太複雜了，也不能描述得很清楚，自己看源碼吧，關鍵在li的高度與margin的設置上，多餘的部分也隱藏了。
文章提供
BAYSTARS DESIGN網頁設計公司
HTML代碼
