如何使html表响应

use*_*936 0 html css responsive-design

我有一个使用常量联系创建的html表,我想让它响应并适合持有它的容器div.

这是演示

我尝试了以下但这不起作用

<table border="0" width="100%" cellspacing="0" cellpadding="0">
Run Code Online (Sandbox Code Playgroud)

wil*_*jam 5

表不是很好的响应和保持他们的布局 - 所以它可能最好在较小的屏幕上覆盖他们的样式,如:

http://jsfiddle.net/wildandjam/E32Cq/

@media all and (max-width:768px){
    table,tr, td, tbody, td p table div, table table{
        width:100%!important;
        float:left;
        clear:both;
        display:block;
        text-align:center;
    }
    table img {
        max-width:100%;
        height:auto;
    }
}
Run Code Online (Sandbox Code Playgroud)