2013年12月13日 星期五

CSS 巢狀表格的框線

要做下面這種表格:

欄位數不一樣,寬度也不一樣。該怎麼寫 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>

沒有留言:

張貼留言