|
去掉間隙
現(xiàn)在我們已經(jīng)有了個(gè)完整的表格了,但是邊框之間的間隔是怎么回事?不幸的是,由于大多數(shù)瀏覽器會(huì)默認(rèn)設(shè)置一點(diǎn)外補(bǔ)丁,因此就會(huì)露出這些令人討厭的間隙了.
我們能做的是為表格元素加上border-collapse屬性來去掉這些間隙,得到我們想要的樣式.
table {
border-top: 1px solid #999;
border-left: 1px solid #999;
border-collapse: collapse;
}
th, td {
border-right: 1px solid #999;
border-bottom: 1px solid #999;
}
在為border-collapse加上collapse屬性后,我們就能看到精確的單線邊框樣式了,如圖3-4
圖3-4:使用了border-collapse屬性后的表格示例
不支持IE for Mac的版本
除了Internet Explorer for Mac之外,其他的瀏覽器都支持把css簡寫成這樣:
table {
border-collapse: collapse;
}
th, td {
border: 1px solid #999;
}
要用哪一種方法,這當(dāng)然由你來決定了,現(xiàn)在仍然有一些人再使用IE for Mac,而使用這個(gè)替代方法的話,會(huì)讓他們看到一些邊線的重復(fù),如果你并不在意這件事情,那就使用簡化的辦法吧.嚴(yán)格來說,這只是個(gè)顯示上的問題,表格功能絲毫不受影響.
由于我無法棄Mac狂熱者于不顧(任何稱職的網(wǎng)頁設(shè)計(jì)師都應(yīng)該這樣),因此再往后的示例中,我還是會(huì)用IE for Mac也能正確顯示的版本.
擴(kuò)大空間
現(xiàn)在我們手上有了一個(gè)完美的表格,不過它看上去有點(diǎn)局促...讓我們?yōu)槭诌叺膖h,td規(guī)則加上一點(diǎn)內(nèi)補(bǔ)丁,給它們呼吸的空間(圖3-5)
table {
border-top: 1px solid #999;
border-left: 1px solid #999;
border-collapse: collapse;
}
th, td {
padding: 10px;
border-right: 1px solid #999;
border-bottom: 1px solid #999;
}
圖3-5:加上10像素內(nèi)補(bǔ)丁的表格示例
你知道嗎?如果用單一數(shù)值設(shè)定內(nèi)補(bǔ)丁的話(比如之前的例子的10px),就需要給元素的四邊都加上相同的設(shè)定值,你也可以按照順時(shí)針順序(上右下左)分別指定每一邊的設(shè)定值.如果你把內(nèi)部定設(shè)定為10px 5px 2px 10px的話,就會(huì)在頂部加上10px的內(nèi)補(bǔ)丁,右側(cè)加上5px的內(nèi)補(bǔ)丁,底部加上2px的內(nèi)補(bǔ)丁,左側(cè)加上10px的內(nèi)補(bǔ)丁.
另一條捷徑:如果上下的設(shè)定值相同,左右的設(shè)定值也相同的話,你就只需要分別設(shè)定一次就可以了,如果設(shè)定了padding:10px 5px的話,就會(huì)在上下部加上10px的內(nèi)補(bǔ)丁,在左右側(cè)加上5px的內(nèi)補(bǔ)丁.
圖3-6:順時(shí)針設(shè)定內(nèi)補(bǔ)丁和外邊界的順序
出處：藍(lán)色理想
責(zé)任編輯：bluehearts
上一頁 標(biāo)記語言——邪惡的表格? [5] 下一頁 標(biāo)記語言——邪惡的表格? [7]
◎進(jìn)入論壇網(wǎng)頁制作、WEB標(biāo)準(zhǔn)化版塊參加討論，我還想發(fā)表評(píng)論。
|
第 1 頁 
第 6 頁 標(biāo)記語言——邪惡的表格? [6]
