Hierarchical html table, putting last td on next line

I'm creating a simple hierarchical table with html and CSS and I'm getting into trouble with formatting the last td element with class .child to be on 开发者_如何转开发next line.

I want to have the nested table inside table > tr > td.child becase each table can be sorted and javascript sorters don't implement any grouping of rows (my problem of having nested table could be easily solved by moving the .child > table element into next table > tr however this would break the nice nesting structure)

Is there a way to put td.child on next row with css?

html sample:

<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>

You could do something like this . You'd need to be careful cross browser though (only checked on Chrome)