我的相片
劍俠鼻唄
如果一個人會不依著同伴的步伐前進,有可能是因為他聽到了另一種鼓聲。
檢視我的完整簡介

2006年6月26日 星期一

CSS實作-CSS表格

以往用table作表格時,往往會覺得格子很難看。通常的作法都是將邊框取消,再用CSS去顯示邊框。布魯克一開始的想法是,要一個細膩一點的表格,就只有這樣而巳。就像手畫的表格一樣,不要有空隙,只是單純陳列項目時能用到即可。


終於在網路上搜到一位中國網友用列表改表格的文章,就想自己也來動手做看看,沒想到竟也成功了(驚訝)。

因為他作法太麻煩,而且作出來的表格也不漂亮。他的作法是沒邊框的,其實只實現了單純的橫向列表(若把border顯示出來,就會發現表格並不好看,或根本不能說是表格,不過他肯把自己的靈感公布出來,在這裡要謝謝他,因為布魯克就是知道這個靈感後,才知道原來還有這個方向。)。

布魯克看了他的作法還是搞不太懂,為什麼弄得這麼麻煩?只要能把列表項橫排,關鍵問題就解決了,把元件改浮動,不就可以了嗎?難道是他試過了,發覺行不通,所以才不用?

當下決定作看看,咦?結果發現可以用啊。為什麼不用浮動實現橫排,而做得那麼麻煩呢?不懂。不論如何,布魯克也效法這位網友的分享精神,布魯克也將自己的作法放在這裡。

-----------------------------------------------------------------------------


1.原本的列表。
<dl>
<dd>酒<dd>白酒<dd>紅酒<dd>黃酒<dd>竹葉青<dd>賓克斯的酒
</dl>

<dl>
<dd>價格(元)<dd>5<dd>10<dd>15<dd>20<dd>50
</dl>

<dl>
<dd>酒齡(年)<dd>5<dd>10<dd>15<dd>20<dd>50
</dl>

2.顯示:

白酒
紅酒
黃酒
竹葉青
賓克斯的酒

價格(元)
5
10
15
20
50

酒齡(年)
5
10
15
20
50


3.以CSS將列表轉表格的結果:

白酒
紅酒
黃酒
竹葉青
賓克斯的酒
價格(元)
5
10
15
20
50
酒齡(年)
5
10
15
20
50


4.作法:

#ListToTable{
padding:0px;
margin: 0px;
width:560px; /*視情況調整,設絕對單位,視窗縮放時,長寬才能固定不變*/
border-bottom:1px solid #fff
}

#ListToTable dl{
padding: 0;
margin: 0;
height:2%;/*高度要限制*/
border-right:1px solid #fff;
border-top:1px solid #fff
}

#ListToTable dd{
width:15%;/*不要設絕對單位,若固定了長寬,視窗縮放時,因長寬固定不變,所以超出的元件會往下跑*/
padding:0;/*height上面有設,這裡就不設了*/
margin: 0;
float:left;
border-left:1px solid #fff
}

則往後任何一個列表,只要指定套用ListToTable,就會變成表格。


♨適用於字數少的項目,想要以表格陳列時,字數超過寬度限制時,表格的結構仍是會被破壞。
2.且因為是以CSS實現的表格,其實只是一種障眼法。所以複製時,再貼在word上,並不會有表格的效果,格式仍是列表(原本word的設計,複製文字時,會將語法一起複製起來)。
3.可用text-align置左中右,若之前有設過text-indent要再重新設一次,否則會繼承.