Раскладка таблицы CSS с сгруппированными ячейками?

У меня есть приложение, в котором я использую таблицы на основе CSS для создания сетки, но некоторые строки имеют дочерние элементы, которые сгруппированы внутри div. Можно ли использовать CSS для получения кода, показанного внизу для отображения:Раскладка таблицы CSS с сгруппированными ячейками?

C |CCCC|C 
DDDD|D |DDDDD

без изменения структуры узлов? Благодаря!
Для справки: http://jsfiddle.net/soney/NRura/

<html xmlns="http://www.w3.org/1999/xhtml"> 
    <head> 
    <style type="text/css"> 
    div.main { 
    display: table; 
    } 
    div.row { 
    display: table-row; 
    } 
    div.cell { 
    display: table-cell; 
    } 
    div.interfere { 
    /* ??? */ 
    } 
    </style> 
    </head> 
<body> 
    <div class="main"> 
    <div class="row"> 
    <div class="cell">C</div> 
    <div class="cell">|CCCC</div> 
    <div class="cell">|C</div> 
    </div> 
    <div class="row"> 
    <div class="cell">DDDD</div> 
    <div class="interfere"> 
    <div class="cell">|D</div> 
    <div class="cell">|DDDDD</div> 
    </div> 
    </div> 
    </div> 
</body> 
</html>

источник

2011-01-10 soney

Могу ли я использовать табличный тег, чтобы показать вам мое решение? Или вам нужно использовать divs и стилизовать их как таблицу с помощью css? –

К сожалению, я застрял, используя divs – soney

Я хотел бы предположить:

.interfere { дисплей: таблица-клеток; }

Это также будет работать, если вам нужно клеткам такую же ширину:

div.row { переполнение: скрытый; } div.cell { дисплей: встроенный блок; ширина: 200px; } div.interfere { дисплей: встроенный; }

источник

2011-01-10 22:05:38 Terminalpunk

Спасибо, установка ячеек фиксированной с работает в этом конкретном случае, но я ищу что-то, что будет работать, так как ширина содержимого ячеек также меняется. – soney

Раскладка таблицы CSS с сгруппированными ячейками?

ответ

Смежные вопросы