注意：ant中的table表格，列的寬度如果設置了，那么該列就是設置的寬度；那些沒設置寬度的列，列寬=（總寬度 - 設置的列寬總和）/ 未設置的列的個數(shù)，即平均寬度；

1.如果表格只是設置了:scroll="{ x : 1550}"，不設置y，那么表格行列是可以對齊的

2.但是遇到需求想要將表頭給固定掉，這時候就需要設置高度y，這時候就出現(xiàn)列不對齊的情況

高度等于瀏覽器可視區(qū)減去一定的篩選部分高度

此時列表行列不對齊

3.這時候只需要將每一列設置寬度，余下其中一列 不設置寬度，同時將x寬度設置必列的寬度的總和還要大就可以了（大力出奇跡）

分割
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.

4.關(guān)于某一行的內(nèi)容太多，未設置列寬度，那么就會被平均，導致有換行問題；
如下：

處理1：如果想強制換行
把這兩句加在對應控制table樣式文件中，就不會分行了

.ant-table-thead > tr > th{ white-space:nowrap; } .ant-table-row td{ white-space:nowrap; }

處理2：給該列設置寬度，超出部分隱藏，配合toolTip做提示即可；

總結(jié)：設置x，y滾動固定；列設置寬度，余下最長的一列不設置寬度，超出隱藏；

<a-table:loading="loading":columns="columns":data-source="data"class="components-table-demo-nested"@change="onChangeTable":scroll="{x:1300,y:y}":pagination="pagination":locale="locale"> const columns = [{title: "任務名稱",// dataIndex: "distributeName",scopedSlots: { customRender: "distributeName" },key: "distributeName",ellipsis: true,},{title: "分發(fā)方",dataIndex: "distributorName",key: "distributorName",},{ title: "接收方", scopedSlots: { customRender: "receiver" }, key: "receiver", ellipsis: true },{title: "關(guān)聯(lián)憑證",key: "distributeAssDoc",scopedSlots: { customRender: "distributeAssDoc" },ellipsis: true,},{title: "是否周期",key: "isPeriod",scopedSlots: { customRender: "isPeriod" },}, <a slot="distributeAssDoc" slot-scope="text"><a-tooltip placement="topLeft"><template slot="title">{{text.distributeAssDoc}}</template><span v-if="text.distributeAssDoc" class="decBox">{{text.distributeAssDoc}}</span></a-tooltip><a-tagv-if="!text.distributeAssDoc"color="geekblue"@click="addUpgradeNum(text.id,text.key)">輸入憑證</a-tag></a> .ant-table-tbody > tr > td a .decBox {font-size: 12px !important;font-family: PingFangSC-Regular, PingFang SC;font-weight: 550 !important;color: rgba(53, 58, 64, 1) !important;line-height: 20px;}

總結(jié)

以上是生活随笔為你收集整理的ant中的table行列不对齐问题，以及换行，隐藏等问题的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯，歡迎將生活随笔推薦給好友。