1. 程式人生 > >css-表格的美化總結

css-表格的美化總結

先說最近遇到一個很麻煩而且蛋疼的事情,感覺最近老闆有點吃錯藥了,把我調到資料庫服務平臺的專案,要我主要負責的是美化這個專案的介面(注:因為這個專案的介面確實是很醜,醜的要命),但是,蛋疼的事情來了,老闆只是要我暫時修改一下表格,因為資料庫服務的其中一個主要的功能就是資料的展示,一個表格有時候會有15列資料。但是我就納悶了,整個介面醜得要命,只是修改一個表格就可以解決的,於是我微調了一下表格的每一個cell的高度,間距,字型的大小,樣式,心裡想,表格嘛,最多就那樣,難道還能改出一個多花來。可是,痛不欲生。老闆總是覺得自己沒有做事一樣,每次 一下,就說,“沒什麼變化啊!!”,你不要老是改那些整體的樣式,先把最重要的資料展示的那一塊做好來,然後就指著表格說一些沒有用的話,最後丟了一句,把表格改好一點。天哪,一個表格還能改出一朵花來嘛??
由於只能繼續改了,一下就是我最近修改表格的總結了。

1,thead和tbody的每一個行佔的高度是不一樣的,重點是在body所以head的行高最好還是要小於body的每一個列的行高。比如說,

table thread tr td {height:36px;}
table tbody  tr td {height:43px;}

2,修改字型,將thead的字型修改為粗體,主要還是強調錶頭的資訊

table thread tr td {
    font-size:14px;
    font-weight:bold;
    font-family:'Open Sans',sans-serif;
    color:#333;
}
table thread tr td { font-size:14px; font-family:'Open Sans',sans-serif; color:#333; }

3,表頭的字型最好是垂直居中
4,border邊的顏色和粗細,最好是使用1畫素,顏色使用的是#ddd色系。

未完待續。。。