1

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>
Brian Tompsett - 汤莱恩
  • 5,753
  • 72
  • 57
  • 129
Juraj Blahunka
  • 17,913
  • 6
  • 34
  • 52
  • if you add the td with class child, within a new tag? – Sotiris Jan 07 '11 at 22:29
  • I don't want to add a sibling to tr, because of table sorters and how they compare rows. If I put a `tr` into another `tr` most browser will cut it out and put it to previous `tr` as a sibling. – Juraj Blahunka Jan 07 '11 at 22:45

1 Answers1

1

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

Stuart Burrows
  • 10,824
  • 2
  • 34
  • 33