<div style="width: 100%;">
      <table style="width: 100%; table-layout: fixed; word-break: break-all;">
      </table>
 </div>
tableLayout 属性用来显示表格单元格、行、列的算法规则 —— fixed：列宽由表格宽度和列宽度设定；默认值为：automatic，表示列宽度由单元格内容设定。
 
word-break 属性规定自动换行的处理方法 —— break-all表示允许在单词内换行。
                                    先看td的width吧，某一个td的width是和所处的一列每个td的width都相关的，取其中最大的width作为这一列中每个td的width，这点是让我们最混淆的地方，一定要从全局把握某个td的width，不能从这一个的width设置就断言它的宽度就是多少，这样是不准确的。还有一点要注意，就是td的height和tr的height之间的关系。当有的tr设置了具体的数值，有的没有设置具体的数值为默认时，先保证各个tr的基本需要，剩下的再满足设置了具体值的tr，之后再全部给没有设置具体值的tr。
                                    做网页的时候，经常会碰到表格宽度对不齐的问题。详细地看了html中表格标签table的高度和宽度设置的细节，现总结如下：
       1、table中的width和height设置及其作用：table中设置的height其实是设置个最小值，也就是当表格中的内容或者行高总值超过这个设置值时，会自动延长表格的height值，当表格中的内容或者行高没有达到这个值时，会自动扩大到这个值。table中设置的width值一般为表格宽度的最大值，不能改变，即使内部的内容宽度超过也不能改变。（这个内部内容如果是图片的话是可以改变表格宽度的。）
      2、tr标签中width和height设置及其作用：
element ui是一个非常不错的vue的UI框架，element对table进行了封装，简化了vue对表格的渲染。
在开发vue框架项目时，引入element插件，使用table表格组件时，遇到了一些问题，以下列出以供参考。
1.表格样式问题：
混乱样式.png
正常样式.png
如上图，在当前导航表格table样式是没问题的，但当我点击别的导航去到另外的页面，然后再回到之前的导航页面，表格table的样式就会混乱，随便点击当前页面或刷新亦或拉伸页面，样式又恢复正常,很奇怪的样式问题。
打开调试之后，发现table的宽度并没有按照100%来显示，而是根据表格宽度值来计算的（我
                                    固定宽度div中有一个table,table设置宽度100%，但是发现table中的内容有一部分被隐藏掉了，实际内容宽度超过了div的宽度
实际效果图：表格内容超出了div的宽度，但是超出部分是被隐藏的
期望效果图：
表格关键部分
<table cellpadding="0" cellspacing="0" border="0" width="100%" bordercolor="#000000" style="border-collapse: collapse;" id="mTable">
                                    用到div包裹table的布局，想要的效果是table的宽度等于div宽度，超出内容省略号显示。
听起来很简单啊，设置table宽度为100%，省略号三行代码往上一粘，心想着大功告成。
but！！！！页面效果发现其中一行数据较长，导致table其实是超出了父级div。
查资料后发现原来table有不一样的默认样式table-layout，它的值是这样的：
  抛出异常 特殊值 阻塞 超时
插入 add(e) offer(e) put(e) offer(e, time, unit)
移除 remove() poll() take() poll(time,