假如我们的网站在发布新闻的时候，在后台插入了表格，表格可能比较大，在手机端如果100%的话，又显示得太小。所以我们考虑的是，在手机端自动可以左右滑动。

例如：

<div class="news_content">{content:content}</div>

这是新闻详情的代码。

通过数据库自动生成。

然后我们需要当有表格的时候，给表格添加一个div来将table包住 。

使用以下JQ：

<script type="text/javascript" charset="utf-8">
    $(function () {
    $('.news_content table').each(function () {
        // 如果父级不是 .table-box 才包裹，避免重复包裹
        if (!$(this).parent().hasClass('table-box')) {
            $(this).wrap('<div class="table-box"></div>');
        }
    });
});

</script>

第三步，我们需要在媒体查询的手机端写个table-box的CSS样式：

.table-box {
    width: 100%;
    overflow-x: auto;   /* 横向滚动 */
    -webkit-overflow-scrolling: touch; /* iPhone 惯性滚动 */
    }

    .table-box table {
        min-width: 600px;   /* 表格最小宽度，避免被压缩变形 */
    }

这样电脑端的table显示100%宽度，写上具体样式就可以了。手机端则使用上面的CSS样式就可以了。