親クラスを変更した後のテーブルの幅が変更されます

Question

複数のテーブルを含むdivがあります。 divのクラスに応じて、それらを非表示にするか可視にします。コードは

<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この

HTMLのようなものである - jQueryの

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

私が気づくことで、そのクラスが設定された後にあるテーブル100％の幅を持たないことが示されていますが、これは単なる通常のテーブルです。

これまで私はFFとChrome（最新v）でこれに気がついたが、IE9ではこれを気付かなかった。 IE9ではテーブルはまだ100％です。

Answer 1

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

あなたがテーブルのdisplayプロパティを設定している場合は、あなたがtableに設定したい：

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

もありますtable-rowとtable-cellあなたは要素のこれらのタイプを表示する必要がある場合：私は.toggleClass()代わりの.addClass()/.removeClass()を使用http://jsfiddle.net/jasper/NnCPU/（注意：ここでは

https://developer.mozilla.org/en/CSS/displayはデモですリンクイベントハンドラは何度も使用することができます）