表格table的寬度問題

首先注意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;
}

這樣子就解決了。