欄位數不一樣,寬度也不一樣。該怎麼寫 CSS ?
(圖中的框線有的呈現模糊,這是因為 picasa 自動對圖片做處理,本來不是這樣。沒辦法。請把所有框線視為1 px 。)
第一個表格,原本是在每一列裡面另外塞一個表格。下圖是在編輯器裡面的樣子。
但是只能試出這樣的效果
或是這樣
中間會有多餘的空白,或是表格之間的框線比較粗。
後來改這樣
再加上下面的 css ,就能達到第一張圖的效果
<style>
/* -- 單層表格 -- */
.tbContent{
margin:auto;
width:800px;
border-collapse:collapse;
}
.tbContent td{
border:1px solid black;
}
/* -- 兩層表格 -- */
.tbL1{
margin:auto;
}
.tbL2 {
width:800px;
border-collapse:collapse;
margin-left:-3px;
}
.tbL1_td > table:first-child td{
border-top:1px solid black;
border-bottom:1px solid black;
border-left:1px solid black;
border-right:1px solid black;
}
.tbL2 td{
border-top:0px;
border-bottom:1px solid black;
border-left:1px solid black;
border-right:1px solid black;
}
</style>
沒有留言:
張貼留言