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

2023-04-02 06:01:09

前言

本篇文章講解了，實際開發中發現表格設定的寬度沒有生效，無論是設定行內樣式，還是給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>

輸出結果：