Don't like ads? PRO users don't see any ads ;-)
Public Pastes
Guest

Untitled

By: a guest on May 7th, 2012  |  syntax: None  |  size: 3.72 KB  |  hits: 14  |  expires: Never
download  |  raw  |  embed  |  report abuse  |  print
Text below is selected. Please press Ctrl+C to copy to your clipboard. (⌘+C on Mac)
  1. unwanted lines in table when collapsing tr in IE
  2. <html>
  3.    <head>
  4.       <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
  5.       <title>Example</title>
  6.       <style type="text/css">
  7. body, p {
  8.     background-color: white;
  9.     font-family: Verdana;
  10.     font-size: 10pt;
  11.     font-style: normal;
  12.     color: black;
  13.     margin-bottom: 4.5pt;
  14.     margin-top: 0pt;
  15. }
  16.  
  17. table {
  18.     border: solid black 1pt;
  19.     border-collapse: collapse;
  20.     padding: 0;
  21.     border-spacing: 0;
  22. }
  23.  
  24. th {
  25.     background: rgb(255, 255, 153);
  26.     border-style: solid;
  27.     border-color: black;
  28.     border-width: 1pt;
  29.     padding: 0cm 5pt;
  30.     color: black;
  31.     font-family: Verdana;
  32.         font-size: 10pt;
  33.     font-style: normal;
  34.     vertical-align: top;
  35. }
  36. td {
  37.     border-style: dotted dotted none none;
  38.     border-color: black;
  39.     border-width: 1pt;
  40.     padding: 0cm 5pt;
  41.     color: black;
  42.     font-style: normal;
  43.     font-family: Verdana;
  44.         font-size: 10pt;
  45.     vertical-align: top;
  46.     margin-bottom: 4.5pt;
  47.     margin-top: 0pt;
  48. }
  49.  
  50. input.buttonSeq {
  51.     color: blue;
  52.     background: ffffcc;
  53.     border: none;
  54.     margin-left:0pt;
  55.     margin-top: 0px;
  56.     margin-bottom: 0px;
  57.     font-size: 100%;
  58. }
  59.  
  60. </style>
  61.       <script type="text/javascript" language="javascript">
  62. //expand and collapse tr functions based on class
  63. function ToggleTRbyClass(clss){
  64.     var trs = document.getElementsByTagName('tr');
  65.     for (var i=0; i!=trs.length; i++) {
  66.         if (trs[i].className == clss) {
  67.             if (    trs[i].style.display == "none")
  68.                 {
  69.                 trs[i].style.display = "table-row"
  70.                 }
  71.             else    {
  72.                 trs[i].style.display = "none"
  73.                 }
  74.         }
  75.     }
  76.     return true;
  77. }
  78. </script>
  79.       </head>
  80.    <body>
  81.       <br><br>
  82.       <table style="table-layout:fixed word-break:break-all">
  83.          <col width="120">
  84.          <thead>
  85.             <tr>
  86.                <th>Element</th>
  87.             </tr>
  88.          </thead>
  89.          <tbody>
  90.             <tr bgcolor="ffffcc">
  91.                <td align="left" style="font-style:italic; font-weight: bold">
  92.                   <div><input type="button" class="buttonSeq" onclick="ToggleTRbyClass('www'); return true;" onMouseOver="this.style.cursor='hand'" value="www"></div>
  93.                </td>
  94.             </tr>
  95.             <tr style="display:none" class="www">
  96.                <td>element1</td>
  97.             </tr>
  98.             <tr style="display:none" class="www">
  99.                <td>element2</td>
  100.             </tr>
  101.             <tr style="display:none" class="www">
  102.                <td>element3</td>
  103.             </tr>
  104.             <tr bgcolor="ffffcc">
  105.                <td align="left" style="font-style:italic; font-weight: bold">
  106.                   <div><input type="button" class="buttonSeq" onclick="ToggleTRbyClass('xxx'); return true;" onMouseOver="this.style.cursor='hand'" value="xxx"></div>
  107.                </td>
  108.             </tr>
  109.             <tr style="display:none" class="xxx">
  110.                <td>element4</td>
  111.             </tr>
  112.             <tr bgcolor="ffffcc">
  113.                <td align="left" style="font-style:italic; font-weight: bold">
  114.                   <div><input type="button" class="buttonSeq" onclick="ToggleTRbyClass('zzz'); return true;" onMouseOver="this.style.cursor='hand'" value="zzz"></div>
  115.                </td>
  116.             </tr>
  117.             <tr style="display:none" class="zzz">
  118.                <td>element5</td>
  119.             </tr>
  120.          </tbody>
  121.       </table><br></body>
  122. </html>
  123.        
  124. <!doctype html>
  125.        
  126. input.buttonSeq {
  127.     color: blue;
  128.     background: ffffcc; /* change this to #ffffcc */
  129.     border: none;
  130.     margin-left:0pt;
  131.     margin-top: 0px;
  132.     margin-bottom: 0px;
  133.     font-size: 100%;
  134. }
  135.        
  136. try {tr.style.display = "table-row";}
  137. catch(e) {tr.style.display = "block";}
create a new version of this paste RAW Paste Data