Таблица border-collapse: настройки смешивания - PullRequest
Новая
       8

Таблица border-collapse: настройки смешивания

2 голосов
/ 24 сентября 2011

Я хотел бы иметь группу записей таблицы, используя настройку collapse, но иметь ее separate из других групп. Должен ли я сделать новую таблицу для каждой из этих «зон»? Я попробовал это, и они не выстраиваются. И они не складываются правильно, когда я просто применяю border-collapse к th и td в моем CSS.

Время искусства. 

<!-- 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 вместе.

Проблема с размещением их в зонах, которые являются их собственными таблицами, заключается в том, что таблицы больше не имеют общих выравниваний. Это заставляет вещи больше не выстраиваться в таблице (как я могу этого ожидать?), Но это нарушает условия сделки, потому что мои данные больше не будут организованы.

Ответы [ 2 ]

0 голосов
/ 24 сентября 2011

Я думаю, что вам лучше всего использовать секунду 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/

0 голосов
/ 24 сентября 2011

Я почти уверен, что это невозможно за столом.Кто-то исправит меня, если я ошибаюсь.
Я пытался использовать margin: и cellspacing=, но они оба не работают должным образом.

...