Hide columns in HTML table via CSS

Question

HTML:

<table class="list qy">
 <tr>
  <td>cell1</td>
  <td class="q">cell2</td>
  <td>cell3</td>
  <td class="y">cell4</td>
 </tr>
</table>

CSS:

table.qy td.q, table.qy td.y { display: none; }

JS:

function toggleQY(b) {
 $("table.list").toggleClass("qy")
}

It work quickly than running with JS for all TD ($("table.list td.q,table.list td.y")...) But it don`t working in IE (8,9)...

As I understand class added for table, but table not refreshing...

I don`t have ideas (((

P.S. sorry for my English

Should work, but anyway try visibility: hidden - unless you need it to disappear from the document flow — casraf
– casraf, Commented Jun 24, 2013 at 15:37
I'm surprised if this actually works. Using display: none takes the table cell out of the document flow but then this creates a malformed table because you are missing a cell! You would either have to expand the other cells to fill that space with colspan=2... perhaps it would be best to wrap the cell in another div or just use visibility: hidden. Is this tabular data BTW? — ProfileTwist
– ProfileTwist, Commented Jun 24, 2013 at 15:41

Wex · Accepted Answer · 2013-06-24 15:42:49Z

2

If all you're trying to do is toggle the visibility of the element, you could always just use .toggle()

$('table.list').find('.q, .y').toggle()

answered Jun 24, 2013 at 15:42

Wex

15.7k10 gold badges67 silver badges108 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

klewis · Accepted Answer · 2013-06-24 15:58:14Z

0

Are you trying to hide the columns by default, then clicking the table to show them again? then you probably want something like this...

The CSS to hide specific columns by default:

.list .q,  .list .y {
  display:none;
}

Then behind that, I am assuming want to toggle your hidden columns on table click. The jQuery:

$(function() {
  $('table.list').on("click",function(){
    $(this).find('.q, .y').toggle();
  });  
})

answered Jun 24, 2013 at 15:58

klewis

8,54816 gold badges70 silver badges113 bronze badges