Исключить div из свойств таблицы css

Question

У меня есть CSS-таблица, подобная этой: http://jsfiddle.net/JZAr8/

<div style="display:table;width:100%">
<div style="display:table-row;">
<div style="display:table-cell;border:1px solid grey;">table-cell</div>
<div style="display:table-cell;border:1px solid grey;">table-cell</div>
</div><!-- row -->
<div style="border:1px solid grey;width:100%">testdiv</div>
<div style="display:table-row;">
<div style="display:table-cell;border:1px solid grey;">table-cell</div>
<div style="display:table-cell;border:1px solid grey;">table-cell</div>
</div><!-- row -->
</div><!-- table -->​

похоже, что 'testdiv' все еще связан со свойствами таблицы и интерпретируется как ячейка таблицы ... Почему это так? Как я могу "исключить" тестдив из таблицы ...?

Answer 1

См. Скрипку для демонстрации.

Скрипка: http://jsfiddle.net/JZAr8/2/

демо: http://jsfiddle.net/JZAr8/2/embedded/result/

Примечание: чтобы преодолеть текстдив, я просто перемещаю тестдив из таблицы. Вам решать, хотите ли вы сохранить тестдив или удалить его.

Answer 2

Вы просто удалите этот div:

<div style="border:1px solid grey;width:100%">testdiv</div>

и оно уходит:

Как здесь