本篇文章講解了，實際開發(fā)中發(fā)現(xiàn)表格設(shè)置的寬度沒有生效，無論是設(shè)置行內(nèi)樣式，還是給css樣式設(shè)置important 的最高權(quán)重也沒有效果，但是給中文文字設(shè)置寬度的樣式是有效果的，很奇怪為什么，下面就一起來看看究竟為何。

一、示例

1、代碼示例：

<table border="1" style="width:100px">
    <th>11111</th>
    <th>22222</th>
    <th>33333</th>
    <tr>
      <td>11111</td>
      <td>11111</td>
      <td>11111</td>
    </tr>
    <tr>
      <td>22222</td>
      <td>22222</td>
      <td>22222</td>
    </tr>
    <tr>
      <td>33333</td>
      <td>33333</td>
      <td>33333</td>
    </tr>
  </table>

輸出結(jié)果：

看到結(jié)果并不是想我設(shè)置的寬度那樣是100px，我們再來看一組示例。

2、代碼示例

<table border="1" style="width: 100px;">
    <th>你好你好你好你好你好1</th>
    <th>你好你好你好你好你好2</th>
    <th>你好你好你好你好你好3</th>
    <tr>
      <td>換行換行換行換行1</td>
      <td>換行換行換行換行1</td>
      <td>換行換行換行換行1</td>
    </tr>
    <tr>
      <td>換行換行換行換行2</td>
      <td>換行換行換行換行2</td>
      <td>換行換行換行換行2</td>
    </tr>
    <tr>
      <td>換行換行換行換行3</td>
      <td>換行換行換行換行3</td>
      <td>換行換行換行換行3</td>
    </tr>
  </table>

輸出結(jié)果：

我們很清楚的看到表格內(nèi)容如果換成漢字的話，可以保證寬度固定為100px但是內(nèi)容自動換行了。那我們再驗證一下，看下面的第三個示例。

3、代碼示例：

<table border="1" style="width:100px">
    <th>11111我可以換行</th>
    <th>22222我可以換行</th>
    <th>33333</th>
    <tr>
      <td>11111</td>
      <td>11111我可以換行</td>
      <td>11111</td>
    </tr>
    <tr>
      <td>22222</td>
      <td>22222</td>
      <td>22222</td>
    </tr>
    <tr>
      <td>33333</td>
      <td>33333</td>
      <td>33333我可以換行</td>
    </tr>
  </table>

輸出結(jié)果：

這次我們證明了，漢字是可以換行的，但是數(shù)字不行。

二、原因

1、查看文檔發(fā)現(xiàn)table表格有個table-loyout屬性

值	描述
auto	默認。列寬度由單元格內(nèi)容設(shè)定。
fixed	列寬由表格寬度和列寬度設(shè)定。
inherit	規(guī)定應(yīng)該從父元素繼承 table-layout 屬性的值。

可以看到默認情況會使用單元格內(nèi)容將表格最大寬度填滿，設(shè)置表格的寬度就會失效。
給表格設(shè)置屬性值為fixed看看效果

2、示例：

<table border="1" style="width:100px;table-layout: fixed;">
    <th>111111111</th>
    <th>222222222</th>
    <th>33333</th>
    <tr>
      <td>11111</td>
      <td>11111</td>
      <td>11111</td>
    </tr>
    <tr>
      <td>22222</td>
      <td>22222</td>
      <td>22222</td>
    </tr>
    <tr>
      <td>33333</td>
      <td>33333</td>
      <td>33333</td>
    </tr>
  </table>

輸出結(jié)果：

發(fā)現(xiàn)效果還是一樣，并沒有換行，但寬度是我們想要的寬度。

3、又搜索了一下發(fā)現(xiàn)這回是內(nèi)容本身的問題了，不是表格的問題了。

因為連續(xù)的數(shù)字是理解為一個整體不會自動換行，所以需要設(shè)置word-wrap屬性允許換行。

值	描述
normal	只允許的斷字點換行（瀏覽器保持默認處理）
break-word	在長單詞或 URL 地址內(nèi)部進行換行。

4、示例代碼：

<table border="1" style="width:100px;table-layout: fixed; word-wrap: break-word;">
    <th>111111111</th>
    <th>222222222</th>
    <th>33333</th>
    <tr>
      <td>11111</td>
      <td>11111</td>
      <td>11111</td>
    </tr>
    <tr>
      <td>22222</td>
      <td>22222</td>
      <td>22222</td>
    </tr>
    <tr>
      <td>33333</td>
      <td>33333</td>
      <td>33333</td>
    </tr>
  </table>

輸出結(jié)果：