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

更改父类后表宽度更改

1 个答案: