ძიება მხარდაჭერაში

ნუ გაებმებით თაღლითების მახეში მხარდაჭერის საიტზე. აქ არასდროს მოგთხოვენ სატელეფონო ნომერზე დარეკვას, შეტყობინების გამოგზავნას ან პირადი მონაცემების გაზიარებას. გთხოვთ, გვაცნობოთ რამე საეჭვოს შემჩნევისას „დარღვევაზე მოხსენების“ მეშვეობით.

ვრცლად

Table problem with hidden <tr>

  • 8 პასუხი
  • 1 მომხმარებელი წააწყდა მსგავს სიძნელეს
  • 2 ნახვა
  • ბოლოს გამოეხმაურა jscher2000 - Support Volunteer

Create "<table width='96%' border='1'><tr><th>a</th><th>b</th><th<c</th><th>d</th><th>e</th></tr><tr id='h'><td>x</td><td>y</td><td colspan='3'>z</td></tr></table>", hide id 'h', then unhide it.

After reshow of <tr id='h'>, FireFox no longer does colspan for

"<td>z</td>" putting 'z' under "th>c</th>".
Create "&lt;table width='96%' border='1'&gt;&lt;tr&gt;&lt;th&gt;a&lt;/th&gt;&lt;th&gt;b&lt;/th&gt;&lt;th&lt;c&lt;/th&gt;&lt;th&gt;d&lt;/th&gt;&lt;th&gt;e&lt;/th&gt;&lt;/tr&gt;&lt;tr id='h'&gt;&lt;td&gt;x&lt;/td&gt;&lt;td&gt;y&lt;/td&gt;&lt;td colspan='3'&gt;z&lt;/td&gt;&lt;/tr&gt;&lt;/table&gt;", hide id 'h', then unhide it. After reshow of &lt;tr id='h'&gt;, FireFox no longer does colspan for "&lt;td&gt;z&lt;/td&gt;" putting 'z' under "th&gt;c&lt;/th&gt;".

ჩასწორების თარიღი: , ავტორი: cor-el

გადაწყვეტა შერჩეულია

As I surmised in my first reply, the error in your script is setting display:block on a table row. Try something like this:


<script type="text/javascript"> function Toggle(a){ var obj=document.getElementById(a); obj.style.display=(obj.style.display!='none')?'none':''; } </script>

This is not a new issue...but it's a familiar one for those who usually develop with IE as their primary test browser. E.g., http://forums.mozillazine.org/viewtopic.php?t=493565#p2623372

პასუხის ნახვა სრულად 👍 0

ყველა პასუხი (8)

I'll make a guess at the problem. If you are setting a table row to display:none and then back to display:block, this can create problems in Firefox. Technically, you should set it to display:table-row. However, that causes problems in older versions of IE. For best results, try:


your_tr.style.display = "";

In other words, clear the value of the display property so that Firefox reverts to the default value.

If I guessed wrong, could you link to a page that demonstrates the problem? It could be your real page or a simple test case made up for demonstration. (t's hard to get a deep understanding here because this board isn't friendly to posting HTML.)

FireFox displays the table correctly until it is hidden (with JavaScript). When it is reshown is when the error occurs. It works correctly in IE9.

Happy to help, but need to see the HTML and JavaScript working together. In your original question, you said you were hiding the element with the id="h" which is the tr element, not the entire table. Details are critical here!

There is now a test page at www.mybfl.com/test.php. Turns out it is not the colspan being ignored, it is everything about the table spacing. Seamonkey screws it up also. IE9 gets it right.

შერჩეული გადაწყვეტა

As I surmised in my first reply, the error in your script is setting display:block on a table row. Try something like this:


<script type="text/javascript"> function Toggle(a){ var obj=document.getElementById(a); obj.style.display=(obj.style.display!='none')?'none':''; } </script>

This is not a new issue...but it's a familiar one for those who usually develop with IE as their primary test browser. E.g., http://forums.mozillazine.org/viewtopic.php?t=493565#p2623372

Thanks. I did not realize FireFox did not handle 'block' for a display mode.

Block works fine for most elements that you want to behave like a block (e.g., to make an img behave like a div rather than a span), but applying it to table rows and table cells causes them to no longer behave like table rows and table cells.