views:

95

answers:

3

I'm working on a website where I need to show/hide table rows. I got the feature working, but the CSS gets bad when I do show. I'm providing a working link; click the 'More...' link and see the action for an example. I'm using jQuery's toggle(slow) for hiding and showing

hi, i have a page built using tables .

http://ratingscorner.com/product_rating.php?alias=Rashtreeya-Vidyalaya-College-of-Engineering-Mysore-Road-Bangalore&product=colleges

If u see the section right side of image where the tick marks are there.after the tick mark the section moves to right hand side. this happened when i did put a code to show/hide the extra features..any solution for this problem?

A: 

what problems are you having?

$("tr").click(function() { $(this).hide(); }
$("#showmore").click(function() { $("#tr:hidden").show() }
GerManson
Did you take a look at the example at all?
Jawa
+3  A: 

OK, I found the problem. You have two tbody tags in the table. This is correct. However, when you use jQuery to show/hide the table, it applies a display: block attribute to the tbody tag which causes browser to render it incorrectly.

Use jQuery to change the display CSS attribute as follows:

  • set display: none to hide the "more properties" section
  • set display: table-row-group to show the "more properties" section
  • OR set display to empty string to let browser show the section the way it should be
Salman A
@salman A - can you just see my original post and prove some help?
pradeep
+1  A: 

The page seems to display correctly in IE8. In Chrome and in FF the problem is that display: block elements inside a table make the browser render the table wrong if there are elements without display: block as well. A solution is either to

  • set display: block to the first tbody element already (this is far the easiest solution)
  • remove the display: none from the .extra_properties when showing the extra rows (and leaving the display: block off as well) or
  • set display: table-row-group when showing. It's to be noted, that display-row-group doesn't work in IE, though.
Jawa
hey thanks for the help every 1. Manually setting it display to none. did for me...
pradeep
@jawa - can you just see my original post and prove some help?
pradeep