html - 如何使 html 表格响应

Question

我有一个使用持续接触创建的 html 表格，我想让它响应并适合容纳它的容器 div。

这是 demo

我尝试了以下方法，但效果不佳

<table border="0" width="100%" cellspacing="0" cellpadding="0">

Answer 1

表格不擅长响应和保持其布局 - 因此最好在较小的屏幕上覆盖它们的样式，例如:

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;
    }
}