Question

我想使用collapse设置创建一组表条目，但要从其他组中获取separate。我是否必须为每个“区域”制作新表？我试过了，他们没有排队。当我在我的CSS中的border-collapse和th上应用td时，它们不会以正确的方式合并在一起。

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。

将它们放入自己的表区域的问题是表格不再共享对齐。它使得表格中的内容不再排列（我怎么能指望它呢？）但这是一个交易破坏者，因为我的数据将不再有条理。

Answer 1

我很确定桌子不可能。如果我错了，有人会纠正我我尝试过使用margin:和cellspacing=，但它们都无法正常使用。

Answer 2

我认为你最好的选择是使用第二个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/

表格边框折叠：混合设置

2 个答案: