<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>
- 发布:2021-03-31 15:39
- 更新:2024-08-07 10:35
- 阅读:9318
产品分类: uniapp/H5
PC开发环境操作系统: Windows
PC开发环境操作系统版本号: win10
HBuilderX类型: 正式
HBuilderX版本号: 3.1.7
浏览器平台: Chrome
浏览器版本: 88.0.4324.190(正式版本)
项目创建方式: HBuilderX
操作步骤:
预期结果:
操作一栏比较窄
操作一栏比较窄
实际结果:
操作一栏很宽
操作一栏很宽
bug描述:
配置的表格th的width,结果不起作用
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-table 的 width 属性 暂时不支持 rpx 的单位
-
回复 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
必须要设置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>
这个bug 今天依然存在
width 就是没有效果