title: Hide Columns in responsive table using css
body: <p>I have a generic table and Want to use this table for multi purpose.
  For Eg 1.
  For Employee details:
  Eno eFname ELName EDept ESalary Elocation.
  In the above i want to hide ELname and Elocation. Currently i used css class to hide the ELName and ELocation.</p>
  
  <p>Eg 2: Student Details
  Sno SFname SLname SDegree SLocation. 
  I want to hide some columns on some devices like in mobile mode, portrait mode.
  Currently i used css class to hide the particular column.But the table is generic for all. </p>
  
  <p>I noticed that adding classes like .hidden-phone and .hidden-tablet to table cells would brdeak them visually. This is because the cells would try to display as blocks. </p>
  
  <p>Can you help me what properties i need to use in .hidden-phone,.hidden-portrait..etc.
  Don't want to hide the columns by using tr td:nth-child(4),tr td:nth-child(3) in media queries.</p>