title: HTML Table Alternate Row Colours With Hidden Rows
body: <p>I'm trying to write simple table with alternate colors of rows.</p>
  
  <p>This is pretty straight forward an have achieved the expected outcome, the issue I am facing is when I have a hidden row, the colour pattern runs into issues.</p>
  
  <p>Here is my fiddle: <a href="http://jsfiddle.net/oampz/2Wt49/" rel="nofollow noreferrer">http://jsfiddle.net/oampz/2Wt49/</a></p>
  
  <p>As you can see, when you click on the ' + ' the table expands and the rows colours alternate, but when the table is collapsed, there are issues in colours.</p>
  
  <p>Here is my HTML:</p>
  
  <pre><code>    &lt;table id="bs-search-results" class="tbl tbl--highlight stripes half-mb"&gt;
      &lt;thead&gt;
          &lt;tr&gt;
              &lt;th&gt;Name&lt;/th&gt;
              &lt;th&gt;Age&lt;/th&gt;
              &lt;th&gt;Height&lt;/th&gt;
              &lt;th&gt;Weight&lt;/th&gt;
          &lt;/tr&gt;
      &lt;/thead&gt;
      &lt;tbody&gt;
          &lt;tr&gt;
              &lt;td class="ShowMe"&gt;+ 0000111&lt;/td&gt;
              &lt;td&gt;0000111&lt;/td&gt;
              &lt;td&gt;0000111&lt;/td&gt;
              &lt;td&gt;0000111&lt;/td&gt;
          &lt;/tr&gt;
          &lt;tr id="itsHidden" class="visuallyhidden"&gt;
              &lt;td&gt;0000222&lt;/td&gt;
              &lt;td&gt;0000222&lt;/td&gt;
              &lt;td&gt;0000222&lt;/td&gt;
              &lt;td&gt;0000222&lt;/td&gt;
          &lt;/tr&gt;
          &lt;tr&gt;
              &lt;td&gt;0000333&lt;/td&gt;
              &lt;td&gt;0000333&lt;/td&gt;
              &lt;td&gt;0000333&lt;/td&gt;
              &lt;td&gt;0000333&lt;/td&gt;
          &lt;/tr&gt;
          &lt;tr&gt;
              &lt;td&gt;0000444&lt;/td&gt;
              &lt;td&gt;0000444&lt;/td&gt;
              &lt;td&gt;0000444&lt;/td&gt;
              &lt;td&gt;0000444&lt;/td&gt;
          &lt;/tr&gt;
      &lt;/tbody&gt;
  &lt;/table&gt;
  </code></pre>
  
  <p>Here is my CSS:</p>
  
  <pre><code>table {
      border-collapse: collapse;
      border-spacing: 0;
      width: 100%;
  }
  th {
      min-width: 22px;
  }
  .stripes tbody &gt; tr:nth-child(2n+2) {
      background: #f2f2f2;
  }
  .stripes li:nth-child(2n+2) {
      background: #f2f2f2;
  }
  .tbl {
      border: 1px solid #d1d1d1;
      font-size: 12px;
      font-size: 0.75rem;
      line-height: 2;
      clear: both;
  }
  .tbl th, .tbl td {
      padding: 3px;
      text-align: left;
      border-right: 1px solid #d1d1d1;
  }
  .tbl th {
      border-bottom: 1px solid #d1d1d1;
  }
  .tbl--highlight tbody tr:hover {
      background: #d4e8fc;
      cursor: pointer;
  }
  .tbl--input td {
      overflow: hidden;
  }
  .half-mb {
      margin: 0 0 12px 0;
  }
  
  .visuallyhidden {
    border: 0;
    clip: rect(0 0 0 0);
    height: 1px;
    margin: -1px;
    overflow: hidden;
    padding: 0;
    position: absolute;
    width: 1px;
  }
  
  .visuallyhidden.focusable:active,
  .visuallyhidden.focusable:focus {
    clip: auto;
    height: auto;
    margin: 0;
    overflow: visible;
    position: static;
    width: auto;
  }
  </code></pre>
  
  <p>Any help appreciated.</p>