Hide HTML Table Columns
<p>I have an HTML table that contains items and days.  The idea is that the first column of the item will be the daily usage of the item, the second column will be the incomming shipments of that item, and the 3rd column will be the daily inventory of that item.  My goal is to hide the first 2 columns automatically and then make them viewable again through a jquery mouseover.  My thought was to add a class to each row and have the first 2 rows set to hidden, on the jquery mouseover I would then .removeClass so that when the item row is highlighted all 3 rows are shown.  </p>

<p>My question is: I have tried using CSS display:none; but doesnt seem to work for html table td elements?  Is there any other CSS command I could use or must I go about this a different way?</p>

<p>Heres an example of a table im trying to work with.</p>

<p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
<div class="snippet-code">
<pre class="snippet-code-css lang-css prettyprint-override"><code>table,th, td {
  
    border: 1px solid black;
    border-collapse: collapse;
       
}</code></pre>
<pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;table&gt;
  &lt;tr&gt;
    &lt;th&gt;Item #&lt;/th&gt;
    &lt;th colspan='3'&gt;100017&lt;/th&gt;
    &lt;th colspan='3'&gt;100018&lt;/th&gt;
    &lt;th colspan='3'&gt;100019&lt;/th&gt;
    &lt;th colspan='3'&gt;100020&lt;/th&gt;
  &lt;/tr&gt;
  &lt;tr&gt;
    &lt;th&gt;Component&lt;/th&gt;
    &lt;th colspan='3'&gt;&lt;u&gt;chips&lt;/u&gt;&lt;/th&gt;
    &lt;th colspan='3'&gt;&lt;u&gt;butterfingers&lt;/u&gt;&lt;/th&gt;
    &lt;th colspan='3'&gt;&lt;u&gt;Flat Pretzels&lt;/u&gt;&lt;/th&gt;
    &lt;th colspan='3'&gt;&lt;u&gt;Milk Chocolate&lt;/u&gt;&lt;/th&gt;
  &lt;/tr&gt;
  &lt;tr&gt;
    &lt;th&gt;2016-01-03&lt;/th&gt;
    &lt;td class='dailyusagetable'&gt;0&lt;/td&gt;
    &lt;td class='incommingtable'&gt;0&lt;/td&gt;
    &lt;td&gt;0&lt;/td&gt;
    &lt;td class='dailyusagetable'&gt;0&lt;/td&gt;
    &lt;td class='incommingtable'&gt;0&lt;/td&gt;
    &lt;td&gt;0&lt;/td&gt;
    &lt;td class='dailyusagetable'&gt;0&lt;/td&gt;
    &lt;td class='incommingtable'&gt;0&lt;/td&gt;
    &lt;td&gt;0&lt;/td&gt;
    &lt;td class='dailyusagetable'&gt;0&lt;/td&gt;
    &lt;td class='incommingtable'&gt;0&lt;/td&gt;
    &lt;td&gt;0&lt;/td&gt;
  &lt;/tr&gt;
  &lt;tr&gt;
    &lt;th&gt;2016-01-04&lt;/th&gt;
    &lt;td class='dailyusagetable'&gt;0&lt;/td&gt;
    &lt;td class='incommingtable'&gt;0&lt;/td&gt;
    &lt;td&gt;0&lt;/td&gt;
    &lt;td class='dailyusagetable'&gt;0&lt;/td&gt;
    &lt;td class='incommingtable'&gt;0&lt;/td&gt;
    &lt;td&gt;0&lt;/td&gt;
    &lt;td class='dailyusagetable'&gt;0&lt;/td&gt;
    &lt;td class='incommingtable'&gt;0&lt;/td&gt;
    &lt;td&gt;0&lt;/td&gt;
    &lt;td class='dailyusagetable'&gt;0&lt;/td&gt;
    &lt;td class='incommingtable'&gt;0&lt;/td&gt;
    &lt;td&gt;0&lt;/td&gt;
  &lt;/tr&gt;
  &lt;tr&gt;
    &lt;th&gt;2016-01-05&lt;/th&gt;
    &lt;td class='dailyusagetable'&gt;0&lt;/td&gt;
    &lt;td class='incommingtable'&gt;0&lt;/td&gt;
    &lt;td&gt;0&lt;/td&gt;
    &lt;td class='dailyusagetable'&gt;0&lt;/td&gt;
    &lt;td class='incommingtable'&gt;0&lt;/td&gt;
    &lt;td&gt;0&lt;/td&gt;
    &lt;td class='dailyusagetable'&gt;0&lt;/td&gt;
    &lt;td class='incommingtable'&gt;0&lt;/td&gt;
    &lt;td&gt;0&lt;/td&gt;
    &lt;td class='dailyusagetable'&gt;0&lt;/td&gt;
    &lt;td class='incommingtable'&gt;0&lt;/td&gt;
    &lt;td&gt;0&lt;/td&gt;
  &lt;/tr&gt;
  &lt;tr&gt;
    &lt;th&gt;2016-01-06&lt;/th&gt;
    &lt;td class='dailyusagetable'&gt;0&lt;/td&gt;
    &lt;td class='incommingtable'&gt;0&lt;/td&gt;
    &lt;td&gt;0&lt;/td&gt;
    &lt;td class='dailyusagetable'&gt;0&lt;/td&gt;
    &lt;td class='incommingtable'&gt;0&lt;/td&gt;
    &lt;td&gt;0&lt;/td&gt;
    &lt;td class='dailyusagetable'&gt;0&lt;/td&gt;
    &lt;td class='incommingtable'&gt;0&lt;/td&gt;
    &lt;td&gt;0&lt;/td&gt;
    &lt;td class='dailyusagetable'&gt;0&lt;/td&gt;
    &lt;td class='incommingtable'&gt;0&lt;/td&gt;
    &lt;td&gt;0&lt;/td&gt;
  &lt;/tr&gt;
  &lt;tr&gt;
    &lt;th&gt;2016-01-07&lt;/th&gt;
    &lt;td class='dailyusagetable'&gt;0&lt;/td&gt;
    &lt;td class='incommingtable'&gt;0&lt;/td&gt;
    &lt;td&gt;0&lt;/td&gt;
    &lt;td class='dailyusagetable'&gt;0&lt;/td&gt;
    &lt;td class='incommingtable'&gt;0&lt;/td&gt;
    &lt;td&gt;0&lt;/td&gt;
    &lt;td class='dailyusagetable'&gt;0&lt;/td&gt;
    &lt;td class='incommingtable'&gt;0&lt;/td&gt;
    &lt;td&gt;0&lt;/td&gt;
    &lt;td class='dailyusagetable'&gt;0&lt;/td&gt;
    &lt;td class='incommingtable'&gt;0&lt;/td&gt;
    &lt;td&gt;0&lt;/td&gt;
  &lt;/tr&gt;
&lt;/table&gt;  </code></pre>
</div>
</div>
</p>