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要再重新設一次,否則會繼承.