【报Bug】uni-table组件表格宽度错误

分类：uni-app

bug反馈

产品分类： uniapp/H5

PC开发环境操作系统： Windows

PC开发环境操作系统版本号： win10

HBuilderX类型：正式

HBuilderX版本号： 3.1.7

浏览器平台： Chrome

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

项目创建方式： HBuilderX

操作步骤：

<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，结果不起作用

2021-03-31 15:39 负责人:无分享

12 个回复

z***@163.com

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

m***@gmail.com

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

2023-09-11 10:55

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

请问这个问题解决了吗

请问解决了吗

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

橘子ist

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

2021-11-08 15:51

DCloud_UNI_HT

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

橘子ist

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

2021-11-08 16:48
DCloud_UNI_HT

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

2021-11-09 09:42
w***@live.com

回复 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>

直接传数值也有问题，没有变化。

2022-05-09 08:08

z***@163.com

必须要设置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>