Table tr display problem (suspected to be a BUG of IE)_html/css_WEB-ITnose

WBOY
Release: 2016-06-24 12:09:09
Original
1022 people have browsed it

There is a table in the system, and there is an operation to hide TR, but the row display is abnormal. It was later condensed into the following procedure, and it was found that it was indeed related to the hiding of TR.
Specifically, when you click on the first row to hide some rows, and then click on the last row, the color of the corresponding row should change, but now there is a slender bar at the top of the row, and its color is not change. (I am using IE8.0 version), it is suspected to be a BUG of IE8.0. I wonder if any expert has any suggestions to solve this problem. Thank you.



TABLE TR





< /tr>






a [click me first.]
b
c
d
e
f
g
h [click me second.]




<script> <br> var hs=false; <br> function hidden() <br> { <br> var c = (hs)?("block"):("none "); <br> document.getElementById("trMain2").style.display = c; <br> document.getElementById("trMain3").style.display = c; <br> document.getElementById("trMain4") .style.display = c; <br> hs = !hs; <br> } <br> </script>


Reply to the discussion (Solution)

No problem

<html xmlns="http://www.w3.org/1999/xhtml" ><head>  <title>TABLE TR</title><script>var hs = false;//hidden是保留字,在Chrome等浏览器中会报错function tr_hidden() {  (hs) ? (c = "table-row") : (c = "none"); //正常的表格行display属性值应为table-row  document.getElementById("trMain2").style.display = c;  document.getElementById("trMain3").style.display = c;  document.getElementById("trMain4").style.display = c;  hs = !hs;}</script></head><body><table id="tab" border=1 width=200><tr id="trMain1" onclick="tr_hidden()"><td>a [click me first.]</td></tr><tr id="trSub1"><td>b</td></tr><tr id="trSub2"><td>c</td></tr><tr id="trMain2"><td>d</td></tr><tr id="trMain3" onclick="this.style.backgroundColor='#7DD6F0'"><td>e</td></tr><tr id="trMain4" onclick="this.style.backgroundColor='#7DD6F0'"><td>f</td></tr><tr id="trSub3" onclick="this.style.backgroundColor='#7DD6F0'"><td>g</td></tr><tr id="trSub4" onclick="this.style.backgroundColor='#7DD6F0'"><td>h [click me second.]</td></tr></table></body></html>
Copy after login

Still not working, everyone!
Click on the first line first, then click on the last line, then click on the last line Not all colors! I am IE8.0!!

The coloring problem seems to be caused by IE’s different interpretation of table border merging. It can be solved by adding the border-collapse:collapse style. IE is a problem.

<table id="tab" border="1" width="200" style="border-collapse:collapse;">
Copy after login

The coloring problem seems to be caused by IE’s different interpretation of table border merging, which can be solved by adding the border-collapse:collapse style. IE is a problem.
HTML code
<table id="tab" border="1" width="200" style="border-collapse:collapse;">
IE has many bugs and is not easy to use. Now I find that there are still many people using ie6. They can’t understand it

Non-deep T5500’s reply. After a pilot test of my application, I found that it still didn't work. Later, after removing the cellpadding="3" cellspacing="1" attributes, everything worked fine. The long-standing problem is solved.

I will summarize what I encountered this time and put it under [http://blog.csdn.net/cuckoo1/article/details/7394962].

Thanks again. Receive points.

source:php.cn
Statement of this Website
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn
Popular Tutorials
More>
Latest Downloads
More>
Web Effects
Website Source Code
Website Materials
Front End Template