Question

I have a div containing multiple tables. Depending on the class of the div I want them to be hidden or visible. Code is something like this

HTML

<div id="div-handle" class="show-first">
  <table class="table-css first-table">
    ...............
  </table>
  <table class="table-css second-table">
    ...............
  </table>
</div>

CSS

.table-css{ 
    border-collapse:collapse;
    margin:0;
    padding:0;
    text-align:left;
    width:100%;
}

.show-first .first-table{ display:block; }
.show-first .second-table{ display:none; }

.show-second .first-table{ display:none; }
.show-second .second-table{ display:block; }

JS – jQuery

$('#some-link').click(function(){ 
    $('#div-handle').removeClass().addClass('show-second');
});

What I notice is that after the class is set that the table that is shown no longer has 100% width, it’s just a normal table.

So far I noticed this in FF and Chrome (newest v), but not in IE9. In IE9 the table is still 100%.

Answer 1

.show-second .second-table{ display:block; }

If you are setting the display property of a table, then you want to set it to table:

.show-second .second-table{ display:table; }

There are also: table-row and table-cell if you need to display those types of elements: https://developer.mozilla.org/en/CSS/display

Here is a demo: http://jsfiddle.net/jasper/NnCPU/ (Notice that I used .toggleClass() instead of .addClass()/.removeClass() so the link event handler can be used over and over)