快捷導(dǎo)航

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

更新時(shí)間：2023年04月01日 11:52:04 作者：菜雞愛上編程

項(xiàng)目中遇到table表格單元格不整齊、錯位等情況,下面這篇文章主要給大家介紹了關(guān)于uniapp中table表格設(shè)置寬度無效的原因以及解決方法,文中通過實(shí)例代碼介紹的非常詳細(xì),需要的朋友可以參考下

前言

本篇文章講解了，實(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，我們再來看一組示例。

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)容自動換行了。那我們再驗(yàn)證一下，看下面的第三個示例。

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

可以看到默認(rèn)情況會使用單元格內(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)容本身的問題了，不是表格的問題了。

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

值	描述
normal	只允許的斷字點(diǎn)換行（瀏覽器保持默認(rèn)處理）
break-word	在長單詞或 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)容自動換行，并且寬度是我們想要的寬度。

三、拓展

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

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

定義和用法

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

1、區(qū)別：

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

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