首先注意table的一个样式

 

table

 

  {

 

  table-layout:fixed;

 

  }

 

table-layout有以下取值：

 

automatic 默认。列宽度由单元格内容设定

 

fixed 列宽由表格宽度和列宽度设定。

 

inherit 规定应该从父元素继承 table-layout 属性的值。

 

当遇到table的宽度超过包围其的div的宽度时，一般要先在浏览器查看元素属性，尝试修改、取消观察样式变化。就我的实际情况而言，最后发现表格的宽度是和表格的element.style属性和单元格内容的宽度属性有关。这是最关键的地方。找到了源头，问题就不难解决了。

 

单元格内容的宽度在我这儿容易修改，可是element.style属性不知是从哪儿引的。在互联网的帮助下，得知element.style属性是内联样式。用！important 语法优先权可以实现我们想要的效果。 

 

element.style {

 

    width: 197px;

 

}

 

宽度太大，想设置自动宽度。如下：

 

.table th{

 

   width: auto  ! important;

 

}

 

这样子就解决了。