title: Toggle table cells using pure CSS
body: <p>Is there any way to toggle (Show / Hide) table column or row with checkbox using CSS no JavaScript? </p>
  
  <p>I've done the following code it does works with div but not with column or row</p>
  
  <pre><code>    &lt;label for="trigger"&gt;Toggle box&lt;/label&gt;
  
  &lt;input id="trigger" type="checkbox"&gt;
  &lt;div class="box"&gt;
  Harry I've got Toggled
  &lt;/div&gt;
  
  &lt;table&gt;
      &lt;thead&gt;
          &lt;tr&gt;
              &lt;th colspan="2"&gt;The table header&lt;/th&gt;
          &lt;/tr&gt;
      &lt;/thead&gt;
      &lt;tbody&gt;
          &lt;tr &gt;
             &lt;td class="box"&gt; I am a column1, I've got same class but sadly did not get toggled! do you know why?&lt;/td&gt;
              &lt;td&gt;  I am a column 2 I don't have any class&lt;/td&gt;
          &lt;/tr&gt;
      &lt;/tbody&gt;
  &lt;/table&gt;
  &lt;style&gt;
  
  .box {
    display: none;
  }
  #trigger:checked + .box {
    display: block;
  }
  table,
  td {
      border: 1px solid #333;
  }
  
  thead,
  tfoot {
      background-color: #333;
      color: #fff;
  }
  &lt;/style&gt;
  </code></pre>
  
  <p>How can I toggle table column or row?</p>