更改父类后的表宽度更改

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

来源

2012-03-06 Saif Bechan

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

来源

2012-03-06 21:15:53 Jasper

啊是的我以前见过这个，谢谢指出它，现在一切正常！我知道toggleClass，忘记在示例中使用它，谢谢指出这一点！ – 2012-03-06 21:27:11

更改父类后的表宽度更改

回答

相关问题