Home > Article > Web Front-end > Table tr display problem (suspected to be a BUG of IE)_html/css_WEB-ITnose
Table tr display problem (suspected to be a BUG of IE)_html/css_WEB-ITnose
- WBOYOriginal
- 2016-06-24 12:09:091022browse
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.
2689eb8c40bc4d4ffe96db8efe197cf4
f96075763e70532c39a66b56535b21ce
b2386ffb911b14667cb8f0f91ea547a7TABLE TR6e916e0f7d1e588d4f442bf645aedb2f
9c3bca370b5104690d9ef395f2c5f8d1
6c04bd5ca3fcae76e30b72ad730ca86d
65b3614ae6c394d243b687790ebada13
2c86d28134e7d625db1c83cf9a9108a8b6c5a531a458a2e790c1fd6421739d1ca [click me first.]b90dd5946f0946207856a8a37f441edffd273fcf5bcad3dfdad3c41bd81ad3e5
215ad7b1117e7df209db4ea94296f8deb6c5a531a458a2e790c1fd6421739d1cbb90dd5946f0946207856a8a37f441edf5194ba175fd9c71e9a9f6e68244d73a8
127319eaa5badb3d233ee29b7ed07842b6c5a531a458a2e790c1fd6421739d1ccb90dd5946f0946207856a8a37f441edffd273fcf5bcad3dfdad3c41bd81ad3e5
498f093e8ab4763f898d21248293845fb6c5a531a458a2e790c1fd6421739d1cd90cc1e42bbf9b97c5947038eac7f874efd273fcf5bcad3dfdad3c41bd81ad3e5
f6c2e917ed803afec9b049af7a7e2300b6c5a531a458a2e790c1fd6421739d1ceb90dd5946f0946207856a8a37f441edffd273fcf5bcad3dfdad3c41bd81ad3e5
6c8d82a15b50db06bc62f0b56cd3b6fab6c5a531a458a2e790c1fd6421739d1cfb90dd5946f0946207856a8a37f441edffd273fcf5bcad3dfdad3c41bd81ad3e5
6cbb19cdb819b96de7565ebab2dbb428b6c5a531a458a2e790c1fd6421739d1cgb90dd5946f0946207856a8a37f441edffd273fcf5bcad3dfdad3c41bd81ad3e5
f510b498e48caeb20eacb132b92bfcc6b6c5a531a458a2e790c1fd6421739d1ch [click me second.]b90dd5946f0946207856a8a37f441edffd273fcf5bcad3dfdad3c41bd81ad3e5
f16b1740fad44fb09bfe928bcc527e08
36cc49f0c466276486e50c850b7e4956
73a6ac4ed44ffec12cee46588e518a5e
3f1c4e4b6b16bbbd69b2ee476dc4f83a
var hs=false;
function hidden()
{
var c = (hs)?("block"):("none ");
document.getElementById("trMain2").style.display = c;
document.getElementById("trMain3").style.display = c;
document.getElementById("trMain4") .style.display = c;
hs = !hs;
}
2cacc6d41bbb37262a98f745aa00fbf0
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> 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;">
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
81b72436e3181dfc87cc6c61d942dd7b
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.