CSS表格樣式：CSS JS打造可伸縮的表格_DIV+CSS實(shí)例

教程Tag：暫無Tag,歡迎添加,賺取U幣!

　　應(yīng)用xhtml CSS開發(fā)符合Web標(biāo)準(zhǔn)的網(wǎng)站，表格的用途是越來越少了。但數(shù)據(jù)顯示表格有著強(qiáng)大的優(yōu)勢(shì)，并不是一味的認(rèn)為，Web標(biāo)準(zhǔn)的網(wǎng)站就不用表格。這樣的理解是片面的，表格有它的功能與優(yōu)勢(shì)，只是不再用表格進(jìn)行布局罷了。

　　我們看一個(gè)CSS JS打造可伸縮的表格的實(shí)例，在實(shí)際操作中，或許你我都會(huì)經(jīng)常碰到這種形式的數(shù)據(jù)，看下面的效果圖：

　　點(diǎn)擊表格右下角的小箭頭圖標(biāo)，表格就會(huì)伸展開來，顯示出表格中的數(shù)據(jù)，此時(shí)的小簽頭就會(huì)變成收縮的形式，再次點(diǎn)擊，表格就會(huì)收縮起來，表格中的數(shù)據(jù)就實(shí)現(xiàn)了隱藏。

　　這個(gè)實(shí)例需要你注重的是實(shí)現(xiàn)這樣的效果是JS的應(yīng)用的功勞，CSS只是對(duì)表格進(jìn)行了相關(guān)的顯示設(shè)置：

示例代碼 [www.hl5o.cn]

body{
font-family:Arial,Sans-Serif;
font-size:90%;
background:#cc9;
}
#boundary{
background:#f8f8f8;
padding:2em;
width:40em;
}
h1{
font-family:"Trebuchet MS",Sans-serif;
text-transform:uppercase;
color:#696;
font-size:120%;
}

table.footcollapse{
width:30em;
}
table.footcollapse caption{
font-size:120%;
text-transform:uppercase;
text-align:left;
padding:.5em 1em;
}
table.footcollapse th{
text-align:left;
}
table.footcollapse,table.footcollapse th,table.footcollapse th
{
border:none;
border-collapse:collapse;
}
table.footcollapse thead th
{
width:10em;
border-style:solid;
border-width:1px;
border-color:#cff #69c #69c #cff;
background:#9cf;
padding:2px 10px;
}
table.footcollapse tfoot th,
table.footcollapse tfoot td
{
border-style:solid;
border-width:1px;
border-color:#9cf #369 #369 #9cf;
background:#69c;
padding:2px 10px;
}
table.footcollapse tbody{
background:#ddd;
}
table.footcollapse tbody td{
padding:5px 10px;
border:1px solid #999;
}
table.footcollapse tbody th{
padding:2px 10px;
border:1px solid #999;
border-left:none;
}
table.footcollapse tbody tr.odd{
background:#ccc;
}

table.footcollapse tfoot td img{
border:none;
vertical-align:bottom;
padding-left:10px;
float:right;
}

　　

　　我們看下面的JS腳本：

示例代碼 [www.hl5o.cn]