Ширина таблицы изменяется после смены родительского класса

Question

У меня есть div, содержащий несколько таблиц.В зависимости от класса div я хочу, чтобы они были скрытыми или видимыми.Код выглядит примерно так:

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');
});

Что я замечаю, так это то, что послеустановлено, что отображаемая таблица больше не имеет ширины 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, если вам нужно отобразить элементы этих типов: https://developer.mozilla.org/en/CSS/display

Вот демонстрационная версия: http://jsfiddle.net/jasper/NnCPU/ (обратите внимание, что я использовал .toggleClass() вместо .addClass() / .removeClass(), поэтому обработчик событий ссылки можно использовать снова и снова)