uni-app uni-table组件表格宽度错误

uni-app uni-table组件表格宽度错误

开发环境 版本号 项目创建方式
Windows win10 HBuilderX

产品分类：uniapp/H5

PC开发环境操作系统：Windows

HBuilderX类型：正式

HBuilderX版本号：3.1.7

浏览器平台：Chrome

浏览器版本：88.0.4324.190（正式版本）

操作步骤：

<uni-tr>  
    <uni-th width="50rpx" align="center">ID</uni-th>  
    <uni-th  align="center">图片</uni-th>  
    <uni-th width="150rpx" align="center">文本</uni-th>  
    <uni-th width="100rpx" align="center">操作</uni-th>  
</uni-tr>

预期结果：

操作一栏比较窄

实际结果：

操作一栏很宽

bug描述：

配置的表格th的width，结果不起作用 image


更多关于uni-app uni-table组件表格宽度错误的实战教程也可以访问 https://www.itying.com/category-93-b0.html

19 回复

uni-table上添加宽度为100%; uni-th上的width属性设置为数字，不要设置成rpx、px、百分比这些都是不起作用的。
<view style="width: 740rpx;">
<uni-table width="100%" border stripe emptyText="没有更多数据">
<uni-tr>
<uni-th width="25">序号</uni-th>
<uni-th width="50">作品名称</uni-th>
<uni-th width="25">作者</uni-th>
</uni-tr>
<uni-tr v-for="(item,index) in bookListTyp1">
<uni-td>{{item.bookSeq}}</uni-td>
<uni-td>{{item.bookName}}</uni-td>
<uni-td>楚河</uni-td>
</uni-tr>
</uni-table>
</view>

更多关于uni-app uni-table组件表格宽度错误的实战教程也可以访问 https://www.itying.com/category-93-b0.html


给uni-th加上一个最小宽度的样式就解决了 <uni-th align="center" style="min-width: 100px;">表头</uni-th>

不行，这个bug还是没有解决，不管是通过ref还是通过原生方法给他设置宽度都不正确，宽度是改了，但是不正确

我也是这个问题求解决办法

请问这个问题解决了吗

请问解决了吗

我刚开始也是用 uni-table 后来也有问题，我现在用的是 uView 的 u-table，没问题，

谢谢回复，我试了一下，宽度的确有用，但是我的列数量稍微有点多，所以渲染完之后，就页面假死拖不动了。我在uni-table下面找到一个解决方法，就是在uni-td里面的文本加一层view然后把宽度写那上面就可以用了。

uni-table 的 width 属性 暂时不支持 rpx 的单位

不加单位好像也没有成功，要用px吗？

回复 橘子ist: 不需要 ，直接传如数值就行

回复 DCloud_UNI_HT: <uni-th width=“200” align=“left” filter-type=“search” @filter-change=“filterChange($event, ‘address’)” sortable @sort-change=“sortChange($event, ‘address’)”>服务地址</uni-th> 直接传数值也有问题，没有变化。

必须要设置th的宽度 ，比如table宽度为100%，有五个标题头的话，那每个th为25%。这样才会奏效。 <uni-table class="u-table" style="100%"> <uni-tr> <uni-th align="center" width="20%">年份</uni-th> <uni-th align="center" width="20%">省份</uni-th> <uni-th align="center" width="20%">最低分</uni-th> <uni-th align="center" width="20%">最高分</uni-th> <uni-th align="center" width="20%">平均分</uni-th> </uni-tr> </uni-table>

不能加单位， 它默认是px，所以直接传数值就可以了， 只能给 th 设置宽度

宽度设置只支持数字，不支持百分比，内容过长会产生宽度大于手机屏幕宽度有滚动条

这个bug 今天依然存在 width 就是没有效果

不要使用单位试一下，只需要给 tr 下的 th 设置宽度即可，如果所有 th 都设置了宽度，且宽度小于100% ，则是按照设置宽度的百分比设置宽度

uni-table在样式中会有一个默认的min-width，在style中设置/deep/.uni-table{ min-width:0px !important } 解决，然后根据uni-th数量设置对应宽度

在uni-app中，uni-table组件的列宽设置确实存在一些限制。根据你的代码和描述，问题可能源于以下几点：

  1. rpx单位在H5端的适配问题：在H5环境中，rpx单位会根据屏幕宽度进行动态换算，可能导致实际渲染宽度与预期不符。建议在H5端优先使用px单位进行精确控制。

  2. 表格布局的固有特性：HTML表格的列宽分配机制会影响最终渲染效果。当内容超出设定宽度或表格总宽度不足时，浏览器会自动调整列宽。

建议尝试以下解决方案：

<uni-tr>  
    <uni-th style="width: 50px; min-width: 50px;" align="center">ID</uni-th>  
    <uni-th align="center">图片</uni-th>  
    <uni-th style="width: 150px; min-width: 150px;" align="center">文本</uni-th>  
    <uni-th style="width: 80px; min-width: 80px;" align="center">操作</uni-th>  
</uni-tr>

同时，为表格容器设置固定宽度：

<uni-table style="width: 100%; table-layout: fixed;">
回到顶部