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

Question

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

Я хочу иметь вложенную таблицу внутри table > tr > td.child потому что каждая таблица может быть отсортирована, а сортировщики 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

Вы могли бы сделать что-то вроде этого. Вы должны быть осторожны кросс-браузер, хотя (проверено только в Chrome)