脚本之家 服务器常用软件
快捷导航
您的位置：首页 → 网络编程 → JavaScript → javascript技巧 → uniapp table表格设置宽度无效

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

 更新时间：2023年04月01日 11:52:04   作者：菜鸡爱上编程  
项目中遇到table表格单元格不整齐、错位等情况,下面这篇文章主要给大家介绍了关于uniapp中table表格设置宽度无效的原因以及解决方法,文中通过实例代码介绍的非常详细,需要的朋友可以参考下

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表格设置宽度无效内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！

您可能感兴趣的文章:

相关文章

  • JavaScript中获取样式的原生方法小结

    JavaScript中获取样式的原生方法小结

    这篇文章主要介绍了JavaScript中获取样式的原生方法小结,本文总结了5种JS获取样式的原生方法,并分别给出了实例,需要的朋友可以参考下
    2014-10-10
  • js 本地预览的简单实现方法

    js 本地预览的简单实现方法

    本篇文章主要是对js本地预览的简单实现方法进行了介绍，需要的朋友可以过来参考下，希望对大家有所帮助
    2014-02-02
  • JS复制到剪贴板示例代码

    JS复制到剪贴板示例代码

    复制到剪贴板的实现方法有很多，在本文将为大家详细介绍下使用js是如何实现的，感兴趣的朋友不要错过
    2013-10-10
  • async/await地狱该如何避免详解

    async/await地狱该如何避免详解

    这篇文章主要给大家介绍了关于async/await地狱该如何避免的相关资料，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧。
    2018-05-05
  • 纯前端JavaScript实现Excel IO案例分享

    纯前端JavaScript实现Excel IO案例分享

    这篇文章主要为大家详细介绍了纯前端JavaScript实现Excel IO案例，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
    2016-08-08
  • 修改file按钮的默认样式实现代码

    修改file按钮的默认样式实现代码

    file按钮作为上传文件使用，不过默认的样式确实让人不敢恭维啊，如何才可以修改为漂亮一点的呢？接下来与大家分享下具体的实现代码，感兴趣的朋友可以参考下哈
    2013-04-04
  • 非常不错的一个JS分页效果代码，值得研究

    非常不错的一个JS分页效果代码，值得研究

    非常不错的一个JS分页效果代码，值得研究...
    2007-06-06
  • 前端echarts tooltip展示多项自定义数据代码示例

    前端echarts tooltip展示多项自定义数据代码示例

    Echarts是一个基于JavaScript的开源图表库,提供了丰富的图表类型,如折线图、柱状图、饼图、散点图等,支持动态数据交互和自定义配置,这篇文章主要给大家介绍了关于前端echarts tooltip展示多项自定义数据的相关资料,需要的朋友可以参考下
    2024-09-09
  • 微信小程序导航栏跟随滑动效果的实现代码

    微信小程序导航栏跟随滑动效果的实现代码

    这篇文章主要介绍了小程序导航栏跟随滑动效果，本文通过实例代码给大家介绍的非常详细，具有一定的参考借鉴价值 ,需要的朋友可以参考下
    2019-05-05
  • 详解webpack性能优化——DLL

    详解webpack性能优化——DLL

    本篇文章主要介绍了详解webpack性能优化——DLL，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
    2017-10-10

最新评论