更改父类后，表宽度发生变化

Table width changes after changing parent class

本文关键字：变化 父类      更新时间：2023-09-26

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

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

相关文章：