本篇文章講解了，實(shí)際開發(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，我們?cè)賮砜匆唤M示例。

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)容自動(dòng)換行了。那我們?cè)衮?yàn)證一下，看下面的第三個(gè)示例。

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表格有個(gè)table-loyout屬性

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

可以看到默認(rèn)情況會(huì)使用單元格內(nèi)容將表格最大寬度填滿，設(shè)置表格的寬度就會(huì)失效。
給表格設(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)容本身的問題了，不是表格的問題了。

因?yàn)檫B續(xù)的數(shù)字是理解為一個(gè)整體不會(huì)自動(dòng)換行，所以需要設(shè)置word-wrap屬性允許換行。

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

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é)果：

可以看到內(nèi)容自動(dòng)換行，并且寬度是我們想要的寬度。

三、拓展

以上的換行可以使用另個(gè)一個(gè)屬性代替，word-break:

值	描述
normal	使用瀏覽器默認(rèn)的換行規(guī)則。
break-all	允許在單詞內(nèi)換行。
keep-all	只能在半角空格或連字符處換行。

定義和用法

word-break 屬性規(guī)定自動(dòng)換行的處理方法。提示：通過使用 word-break 屬性，可以讓瀏覽器實(shí)現(xiàn)在任意位置的換行。

1、區(qū)別：

word-break不會(huì)留空隙，而word-wrap會(huì)在空格和cjk（中，日，韓）字符換行

2、示例截圖：（可以猜一下哪個(gè)是word-break的效果）

總結(jié)

到此這篇關(guān)于uniapp中table表格設(shè)置寬度無效的原因以及解決方法的文章就介紹到這了,更多相關(guān)uniapp table表格設(shè)置寬度無效內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

您可能感興趣的文章: