Table cell not spanning correctly

Question

Hi,

I'm having trouble with a table cell not spanning correctly. I'm using jQuery to show/hide a row of a table which contains a form, however, when I toggle the display of it, it isn't working correctly.

You can see what I mean here - http://development.dekken.co.uk/bni/training/

If you click on 'confirm', the form is toggled. However, as you'll see, it both pushes the layout of the other rows out of place AND doesn't fill the row as it should.

thanks in advance for your help, Greg.

---

UPDATE It seems that the issue in question is not occurring in IE, only Safari and Firefox

Answer 1

Dont know if it's related but tr should have display = "table-row", not "block"

Answer 2

It would appear that some of the values you're using for the CSS attribute "display" are causing some of the layout issues. "block" is technically not an appropriate value for "display" when playing with rows and cells - it changes the rendering mode of the element to something that's not table-based, rather than just making it appear; better values are "table-row" and "table-cell".