Ok, my browser of choice is the wonderfully standards-compliant Mozilla, which I was sure would render my table exactly as I intended. How did it look in Mozilla 1.6 under Linux?
Whaaat? Where did that cell wrapping come from? Why does it only happen to the columns on the left? There was plenty of room in my browser to render the table without wrapping.
Ok, Mozilla's not actually a target browser for this application anyway. Lets see what Internet Explorer 6 on Microsoft Windows does:
Ok, IE did something vaguely like what I intended. Notice, though, that the spacing is all screwed up. All the table cells for indentation are supposed to be the same size: the size of the space between the sub-items and their edit controls. The space indenting the sub-items from the left of the table is about one and a half times as wide, and the space between the main items and their edit controls is like three times as wide as it should be. That's why this table rendering is unacceptable.
Unfortunately, I also have to get this to look right in the known-to-be-markedly-inferior IE 5 for Macintosh. In this case, it didn't do too badly:
The spacer cells look identical, but what's that extra space doing in the cells containing the item names? It looks like there's as much space to the right of each item name cell as there is in a spacer cell. The subitem edit box cells are the only ones which (correctly, by my way of thinking) don't have lots of extra space in the cells.
Since you probably want to see this rendered in your browser as well, here it is:
| main item one | main item one edit control | ||||
| main item two | |||||
| subitem one | subitem one edit control | ||||
| subitem two (with a long name) | subitem two edit control | ||||
| main item three | main item three edit control | ||||
Ok, reading up on my html, I found out that the td tag can have a nowrap attribute. That sounds like it would fix that Mozilla rendering, right? Let's add it to all the td tags and see what happens.