更改父类后表格宽度发生变化答案

【问题标题】：Table width changes after changing parent class更改父类后表格宽度发生变化
【发布时间】：2012-03-07 05:15:53
【问题描述】：

我有一个包含多个表格的 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%。

【问题讨论】：

标签： javascript jquery html css cross-browser

【解决方案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()，因此可以反复使用链接事件处理程序）

【讨论】：

啊，是的，我以前看过这个，感谢您指出，现在一切正常！！我确实知道toggleClass，忘记在示例中使用它，也感谢您指出！