uniapp中table表格設置寬度無效的原因以及解決方法

Posted on by

table表格設置標題無效解決辦法及原因探索

此屬性並不隻限於uniapp同時適用於普通表格設置

前言

本篇文章講解瞭，實際開發中發現表格設置的寬度沒有生效，無論是設置行內樣式，還是給css樣式設置important 的最高權重也沒有效果，但是給中文文字設置寬度的樣式是有效果的，很奇怪為什麼，下面就一起來看看究竟為何。

一、示例

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>

輸出結果：

看到結果並不是想我設置的寬度那樣是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>

輸出結果：

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

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>

輸出結果：

這次我們證明瞭，漢字是可以換行的，但是數字不行。

二、原因

1、 查看文檔發現table表格有個table-loyout屬性

值 描述
auto 默認。列寬度由單元格內容設定。
fixed 列寬由表格寬度和列寬度設定。
inherit 規定應該從父元素繼承 table-layout 屬性的值。

可以看到默認情況會使用單元格內容將表格最大寬度填滿，設置表格的寬度就會失效。
給表格設置屬性值為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>

輸出結果：

發現效果還是一樣，並沒有換行，但寬度是我們想要的寬度。

3、又搜索瞭一下發現這回是內容本身的問題瞭，不是表格的問題瞭。

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

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

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>

輸出結果：

可以看到內容自動換行，並且寬度是我們想要的寬度。

三、拓展

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

值 描述
normal 使用瀏覽器默認的換行規則。
break-all 允許在單詞內換行。
keep-all 隻能在半角空格或連字符處換行。

定義和用法

word-break 屬性規定自動換行的處理方法。提示：通過使用 word-break 屬性，可以讓瀏覽器實現在任意位置的換行。

1、區別：

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

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

總結

到此這篇關於uniapp中table表格設置寬度無效的原因以及解決方法的文章就介紹到這瞭,更多相關uniapp table表格設置寬度無效內容請搜索WalkonNet以前的文章或繼續瀏覽下面的相關文章希望大傢以後多多支持WalkonNet！

推薦閱讀：