表格邊框塌陷：混合設置

我想有一組使用collapse設置的表項，但要從其他組使用separate。我是否必須爲每個「區域」製作一張新桌子？我試過了，他們沒有排隊。當我在我的CSS中的th和td上應用border-collapse時，它們不會一起摺疊。表格邊框塌陷：混合設置

Ascii藝術時間。

<!-- table with two rows two columns with first one having colspan=2: --> 
┌────────┐ 
| abcd │ 
├───┬────┤ 
| a | bc | 
└───┴────┘ 

<!-- Same table, separate looks like this (but more squished because there arent enough unicode table characters for this) --> 
┌─────────┐ 
| abcd │ 
└─────────┘ <-- this bit is squished together 
┌───┐┌────┐ 
| a || bc | 
└───┘└────┘

而我想是這樣的，我已經得到了他們是否得到倒塌或不是任意的控制：

<!-- this table is made of two rows. two <td colspan=2> in the first row. four <td> in the second row. The third and fourth ones are to be separate. The rest collapse their borders. --> 
┌────────┬─────────────┐ 
| abcd │  efg  | 
├───┬────┼─────────────┘ <--- again, here the hh and ijk borders should be separate but rising to fill that space 
| | |┌──┐┌───────┐ 
| a | bc ||hh|| ijk | 
| | |└──┘└───────┘  
└───┴────┘

在這裏你可以看到，我已經得到了HH和IJK爲明確separate，但其餘的都是collapsed在一起。

將它們放入屬於它們自己的表格的區域的問題是表格不再共享對齊。它讓事情不再在表格中排列（我怎麼能期待它？），但它是一個破壞交易的原因，因爲我的數據將不再被組織。

來源

2011-09-24 Steven Lu

嗯，什麼？你將不得不更加具體，或者提供一些視覺例子，因爲現在，我不知道你想要什麼作爲最終結果。 – Nightfirecat

不是很清楚... –

是的。我試圖在我的措辭中毫不含糊，但這是一個圖片任務。更新 –

我敢肯定，這是不可能的表。有人糾正我，如果我錯了。
我試過使用margin:和cellspacing=但他們都無法正常工作。

來源

2011-09-24 10:32:29

我認爲你最好的選擇是使用第二個table。

然後，你將需要刪除一些邊界和使用border-collapse:separate;和border-spacing

table{ 
    border-collapse:collapse; 
} 

td{ 
    padding:1em; 
    border:1px solid red; 
    border-collapse:collapse; 
} 

td.no_border{ 
    border-bottom:0; 
    border-right:0; 
    padding:0; 
} 

table.separate{ 
    border-collapse:separate; 
    border-spacing:5px; 
} 

table.separate td{ 
    border-collapse:separate; 
    padding:1em; 
    border-spacing:5px; 
}

工作實例：http://jsfiddle.net/jasongennaro/k2cN5/

來源

2011-09-24 11:04:48

因此，您只需手工捏造間距，直到它看起來不錯？ –

就是這樣@Steven Lu！我認爲沒有其他辦法。 –

表格邊框塌陷：混合設置

回答

相關問題