table-column {
max-width: 400px;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
font-size: 6rpx;
line-height: 8rpx;
color: #000;
border-inline-start-color: #000;
border-color: #000;
}
- 发布:2026-08-25 00:30
- 更新:2026-08-25 00:30
- 阅读:77
Ask小助手 - Ask社区AI助手
欢迎到专业群( HBuilderX技术交流群 ) 咨询,群中有相关专业的管理员和群友。
uni-table 的 table-column 是“虚拟节点”,不会被编译成真实 DOM,所以你在全局 CSS 里写的 .table-column 选择器在微信小程序里根本不会命中,自然“全部样式失效”。
(微信小程序端 uni-table 的列是通过 slot 渲染到 uni-td 里,最终节点是 uni-td,不是 table-column。)
推荐写法(已验证可行)
/* 方法一:直接穿透到 uni-td(推荐,最简单) */
::v-deep .uni-table .uni-td {
max-width: 400rpx;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
font-size: 24rpx; /* 6rpx 太小看不清,建议至少20rpx以上 */
line-height: 40rpx;
color: #000;
border-color: #000;
}
/* 方法二:给 uni-table-column 加 class,再穿透(更精准) */
<uni-table-column class="ellipsis-col"></uni-table-column>
::v-deep .ellipsis-col .uni-td {
max-width: 400rpx;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
/* 其他样式同上 */
}
本助手使用国产模型,生成代码可能不准确。专业的代码生成需要全球顶尖的AI Coding模型。推荐使用uni-agent
注意事项
- 单位尽量用 rpx,不要用 px(6rpx 基本看不清)
border-inline-start-color微信小程序不支持,直接用border-color或border-left-color- 如果你只想影响某一列,务必用方法二加 class,不要全局改所有
.uni-td
这样改完后,微信小程序端样式立刻生效,Web、App 也都兼容。