• uniapp中table表格设置宽度无效的原因及解决办法


    table表格设置标题无效解决办法及原因探索

    此属性并不只限于uniapp同时适用于普通表格设置
    
    • 1


    前言

    本篇文章讲解了,实际开发中发现表格设置的宽度没有生效,无论是设置行内样式,还是给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>
    
    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    • 11
    • 12
    • 13
    • 14
    • 15
    • 16
    • 17
    • 18
    • 19
    • 20

    输出结果:
    在这里插入图片描述
    看到结果并不是想我设置的宽度那样是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>
    
    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    • 11
    • 12
    • 13
    • 14
    • 15
    • 16
    • 17
    • 18
    • 19
    • 20

    输出结果:
    在这里插入图片描述
    我们很清楚的看到表格内容如果换成汉字的话,可以保证宽度固定为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
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    • 11
    • 12
    • 13
    • 14
    • 15
    • 16
    • 17
    • 18
    • 19
    • 20

    输出结果:
    在这里插入图片描述
    这次我们证明了,汉字是可以换行的,但是数字不行。

    二、原因

    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>
    
    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    • 11
    • 12
    • 13
    • 14
    • 15
    • 16
    • 17
    • 18
    • 19
    • 20

    输出结果:
    在这里插入图片描述

    发现效果还是一样,并没有换行,但宽度是我们想要的宽度。
    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>
    
    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    • 11
    • 12
    • 13
    • 14
    • 15
    • 16
    • 17
    • 18
    • 19
    • 20

    输出结果:
    在这里插入图片描述
    可以看到内容自动换行,并且宽度是我们想要的宽度。

    三、拓展

    以上的换行可以使用另个一个属性代替,word-break:

    描述
    normal使用浏览器默认的换行规则。
    break-all允许在单词内换行。
    keep-all只能在半角空格或连字符处换行。

    定义和用法

    word-break 属性规定自动换行的处理方法。
    提示:通过使用 word-break 属性,可以让浏览器实现在任意位置的换行。
    
    • 1
    • 2

    1、区别:
    word-break不会留空隙,而word-wrap会在空格和cjk(中,日,韩)字符换行
    2、示例截图:(可以猜一下哪个是word-break的效果)
    在这里插入图片描述
    在这里插入图片描述

    总结

    以上内容整理不易,如有问题欢迎评论指出,共同探讨。

  • 相关阅读:
    毕业设计:基于机器学习的文本聚类 - 可用于舆情分析
    IDEA通过Docker插件部署SpringBoot项目
    天池Python练习05-列表操作
    Jackson和fastjson解决序列化时字段属性大小写改变的问题
    面向对象设计原则之接口隔离原则
    Mysql DateTime 问题
    安装vim插件慢怎么办?
    MacOS安装java.安装openjdk步骤
    [b01lers2020]Welcome to Earth
    迁移学习 & 凯明初始化
  • 原文地址:https://blog.csdn.net/qq_43205326/article/details/125872661