javascript - 更改父类后表格宽度发生变化

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(最新版本)中注意到了这一点，但在 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()，因此链接事件处理程序可以用于及以上)