CSS去除表格td默認(rèn)間距及制作1px細(xì)線表格_DIV+CSS實(shí)例

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

　　現(xiàn)在在所謂“div css”的風(fēng)氣下，很多人放棄了表格，其實(shí)應(yīng)該讓每個(gè)標(biāo)簽物盡其用，在表現(xiàn)數(shù)據(jù)的地方，我們還是應(yīng)該使用table。但是，我們?cè)诮able的時(shí)候，會(huì)發(fā)現(xiàn)它會(huì)具有一些默認(rèn)的樣式，比如單元格td之間會(huì)有間距，所以我們通常開頭是這樣寫的：

示例代碼 [hl5o.cn]

　　在頁(yè)面內(nèi)，通過(guò)cellspacing="0"將這個(gè)間距消除，合并邊框�，F(xiàn)在，我們要一個(gè)干凈的表格table。

示例代碼 [hl5o.cn]

<table class="dir">
<caption>如何通過(guò)CSS去除表格默認(rèn)樣式的間距</caption>
<tr>
<th>test</th>
<th>test</th>
<th>test</th>
</tr>
<tr>
<td>test</td>
<td>test</td>
<td>test</td>
</tr>
</table>

　　我們只要給這個(gè)table一個(gè)border-collapse:collapse的樣式，就可以達(dá)到這個(gè)效果了。

示例代碼 [hl5o.cn]

.dir{ width:100%; border-left:#C8B9AE solid 1px;border-top:#C8B9AE solid 1px;border-collapse:collapse;}
.dir td{width:25%;border-right:#C8B9AE solid 1px;border-bottom:#C8B9AE solid 1px;background-color: #D7D1CB;padding:10px 10px 6px;vertical-align: top;}

　　這樣，我們達(dá)到了所需要的效果，并且，上面的css樣式還把表格table定義成了1px的細(xì)線表格。

　　在沒(méi)有對(duì)table進(jìn)行內(nèi)部樣式定義，而通過(guò)樣式表，成功的去除td默認(rèn)的間距，以及定義為1象素的細(xì)線表格。真正做到了結(jié)構(gòu)與表現(xiàn)的分離。