Иерархическая таблица html, помещая последний td на следующую строку

Question

Я создаю простую иерархическую таблицу с html и CSS, и у меня возникают проблемы с форматированием последнего элемента td с классом .child, который будет на следующей строке.

Я хочу иметь вложенную таблицу внутри table > tr > td.child Becase каждой таблица может быть отсортирована и Javascript сортировщиков не осуществляет какие-либо группировки строк (мою проблему наличия вложенной таблицы может быть легко решено путем перемещения .child > table элемента в следующий table > tr однако это сломает красивую структуру вложенности)

Есть ли способ поставить td.child на следующую строку с css?

HTML пример:

<table> 
    <tr> 
     <td>I have</td> 
     <td>1</td> 
     <td>pie</td> 
     <td class="child"> 
      <table> 
       <tr> 
        <td>I have</td> 
        <td>1</td> 
        <td>pie</td> 
       </tr> 
      </table> 
     </td> 
    </tr> 
</table> 

Answer 1

Вы могли бы сделать что-тоlike this. Вам нужно быть осторожным в браузере (только в Chrome)