关于table设置百分比单位无法实现响应式的问题---强制換行

欢迎来到Altaba的博客  2017年8月10日 
今天来说一下自己在工作中遇到的一个小坑，工作中需要通过邮箱给用户发送一个html页面，为了满足样式布局在邮箱中能正常显示，很多样式都不能起到作用，布局都是采用很古老的table进行布局，整体单位采用百分比设置，使用媒体查询进行不同尺寸适配合适的样式，前期给用户生成的html邮件都是满足不同设备浏览的，直到最近遇到一个反馈，给客户发送的一个html邮件手机查看出现样式问题，不能实现手机端（小尺寸）正常浏览，出现横向滚动条。。。
哎呀这下懵逼了，难道是我不小心修改了什么样式导致不能实现响应式了吗？
难道是别人修改了我的代码？
好，我看看这个生成的HTML是什么样式导致其不能响应式，我硬是查了一下午还是调整不好，这下都想放弃治疗了，心里默默喊着：前端真坑！前端真坑！前端真坑！
当我快准备放弃的时候，不禁意间再看一下文档的内容，发现一个td里面包含了一段很长的英文字母，是一个URL地址，忽然这下顿悟了，英文字母之间如果没有空格,系统认为这是一个单词,就不会自动换行.汉字就没有这种情况。前面都是废话哈，重点在这！！！解决办法看下table和td上面各设置一样式

table{
            table-layout: fixed;//在自动表格布局中,列的宽度是由列单元格中没有折行的最宽的内容设定的。
        }
tr{
         word-wrap: break-word;//word-wrap 属性允许长单词或 URL 地址换行到下一行。
  }

这样测试再也不用担心用一大段长英文字符折磨我们开发者了