解决Antd Table组件表头不对齐的问题

背景：

在使用Antd的table组件时，由于表头参数过多，于是设置了scroll属性，在其超出一定宽度后进行滚动

但是在添加了该属性之后，经常会出现表头不对齐的问题：

针对该问题Google 了一下解决方案，但大多不是很完善，为解决问题。现整理下完整的解决方案：

1、对表格的每一行 【columns】设置width属性（留出一行进行宽度自适应）；

2、scroll属性中的x选择一个合适的值（或者直接设为 max-content）；

如果以上两步仍解决不了对齐问题的话，请继续第三步操作

3、对table的每一个td 添加 className=“word-wrap”，并设置对应样式

（因为td内部的内容在出现连续字母或数字的时候不会主动换行），导致td内部宽度撑开，与th宽度不一致

.word-wrap {
 word-break: break-all;
}

以上操作完成之后可能还是有问题（请检查下是不是表头中内容的宽度默认被撑开了），然后重新调整下column中的width即可

近期在开发的过程中，另发现了一种非常有效得解决方案，特与大家分享：

在对columns的每一项设置了宽度后，如果还是有错位问题的话，可以尝试在columns的末位push一个空的column进行占位，这个空的column不用设置宽度，任其自适应。

注意：该column的title需要设置为空字符串，避免在界面上将其渲染出来

补充知识：vue实现超过两行显示展开收起

基于vue-cli2，sass，vant（ui组件）：https://youzan.github.io/vant/#/zh-CN/home

具体代码如下：

.group {
 .list {
  padding: 5px 0;
  border-bottom: 1px solid #eaeaea;
 }
 .text {
  position: relative;
  color: #000;
  font-size: 14px;
 }
 .more {
  visibility: hidden;
 }
 .link {
  font-size: 12px;
  color: #2d95fe;
 }
 .retract {
  position: relative;
  overflow: hidden;
 }
 
 .retract:after {
  content: "...";
  position: absolute;
  bottom: 0;
  right: 2px;
  width: 25px;
  padding-left: 25px;
  background: linear-gradient(to right, transparent, #fff 45%);
 }
}

以上这篇解决Antd Table组件表头不对齐的问题就是小编分享给大家的全部内容了，希望能给大家一个参考，也希望大家多多支持考高分网。