title: CSS for hiding multiple columns in a table
body: <p>I have a table similar to the one illustrated below in a SharePoint site. I cannot modify the table as it is generated dynamically but I can add external CSS to override its style. I am required to show only second column and hide first, third and fourth column. </p>
  
  <p>The pseudo class to hide first column is</p>
  
  <pre><code>table#student tr td:first-child { display: none; }
  </code></pre>
  
  <p>Please help me with pseudo class or any other trick to hide third and forth column. </p>
  
  <pre><code>&lt;table id="student"&gt;
      &lt;tr&gt;
          &lt;td&gt;Role&lt;/td&gt;
          &lt;td&gt;Merin&lt;/td&gt;
          &lt;td&gt;Nakarmi&lt;/td&gt;
          &lt;td&gt;30&lt;/td&gt;
      &lt;tr&gt;
          &lt;td&gt;Role&lt;/td&gt;
          &lt;td&gt;Tchelen&lt;/td&gt;
          &lt;td&gt;Lilian&lt;/td&gt;
          &lt;td&gt;22&lt;/td&gt;
      &lt;/tr&gt;
      &lt;tr&gt;
          &lt;td&gt;Role&lt;/td&gt;
          &lt;td&gt;Suraj&lt;/td&gt;
          &lt;td&gt;Shrestha&lt;/td&gt;
          &lt;td&gt;31&lt;/td&gt;
      &lt;/tr&gt;
  &lt;/table&gt;
  </code></pre>