问题原因说明（借鉴网友http://1991421.cn/2020/02/05/e968d6d9/）

1. PC端屏幕显示设置缩放比例对页面布局会有影响如果修改为100%，页面重绘，问题消失
2. 在Windows下，Chrome的滚动窗格默认是占据空间，但Mac并不会，这点与版本无关，与系统有关。Mac为何没事，比如Mac下的Chrome,注意到滚动窗格是不计算在宽度之内的，你可以理解为是不同的层
3. 错位的直接原因是Windows下设备像素比不是1时，表头的纵向滚动窗格与表格内容的滚动窗格宽度不一致，所以容器宽度与表格内容的宽度也不一致，而列因为我们设定的宽度百分比，造成了两者宽度不一致，所以出现了这个问题。当我们手动将电脑的缩放比例改为100%，这时滚动窗格宽度也就都一致了，所以也就不存在不对齐问题。但为什么设备像素比不是1时，表头的纵向滚动窗格与表格内容的滚动窗格宽度不一致？不知道，maybe都算一个BUG

设备像素比

问题搞明白了，顺便了解下背后的本质原因===_设备像素比_。当我们修改了缩放比例，实际上修改的就是设备像素比,假如我们设定了150%，实际上设备像素比就是1.5，也就是比如普通的文本12px,但实际上物理显示的大小会是18px,当然我们CSS里提示的还会是12px。这就说明了，为什么有时网页看上去字体比别人大。通过JS脚本执行，我们也可以获取实际上的设备像素比.

问题复现

原图

这么严重的bug怎么能放过它，于是我开始了疯狂的百度而得到的答案就是给table的每一列添加固定的宽或者使用百分比，于是我就怀着成功的心态试了很多次最后的结果就是fail，我的心态顿时崩了难道就没办法解决了吗？当然不是的下面开始说解决办法

问题解决

1.为表格添加样式

          <Row id='datepicker'>
              <Item>
                <Table
                  style={{ wordBreak: 'break-all' }} // 在这里添加样式
                  dataSource={dataSource}
                  columns={this.siteTableHeade()}
                  pagination={false}
                  size="middle"
                  rowKey={(record: any) => record.distributionId}
                  scroll={{ x: this.width }}
                />
              </Item>
            </Row>

安全起见另外需添加额外的样式

1. 给整个table添加word-break: break-all!important;
2. 给table内的每个td添加word-break: break-all!important;
3. 改变table下的overflow-y添加

.ant-table-small>.ant-table-content .ant-table-header {
  overflow-y: overlay !important;
}
.ant-table-fixed-header>.ant-table-content>.ant-table-scroll>.ant-table-body {
  overflow-y: overlay !important;
}

整体展示

.ant-table-tbody {
    .td {
      word-break: break-all!important;
    }
  }
  .table {
    word-break: break-all!important;
    .ant-table-placeholder {
      min-height: 450px;
    }
  }
  .ant-table-small>.ant-table-content .ant-table-header {
    overflow-y: overlay !important;
  }

  .ant-table-fixed-header>.ant-table-content>.ant-table-scroll>.ant-table-body {
    overflow-y: overlay !important;
  }

2.计算表格的这些列所占的宽度（columndata为表格的表头）

const width = columnData.reduce((total, { width = 0 }) => total + width, 0)

或

let width = 0
columndata.map((obj) =>{
  if (obj.width !== undefined) {
    width += obj.width
  }
})

3.应用width

<Row className="tablist">
          <TableItem
            ref={tableRef}
            rowSelectionFixed
            filterKey="projectId"
            rowKey={({ projectId }) => projectId}
            searchParams={searchParams}
            URL={queryMaterialProjectList}
            columns={columnData}
            scroll={{ x: width }} // 在这里应用
            getSelectedRow={this.getSelectedRow} />
        </Row>

然后这样就解决了最终的效果图是这样子的

image.png

这样子才对嘛工工整整的漂漂亮亮的就是这么nice