# 表格的換行與不換行 [TOC] ## 一、強制表格所有列不換行 > 此功能可以強制表格所有列不換行，過長會顯示滾動條 ### 弊端提醒 ``` * 1.會導致fixed屬性失效，無法固定列。 * 2.會導致列寬屬性 width失效。 ``` ### 引入樣式 首先必須引用以下樣式代碼 ``` import '@/assets/less/TableExpand.less' ``` ### Table添加class 僅需在 `a-table` 上添加一個 class 樣式即可  ``` class="j-table-force-nowrap" ``` ### 添加前效果  ### 添加后效果  ## 二、強制表格不換行后，如何固定列和設置width呢？ > 20200506升級，代碼生成器改造點： > 1. 列表默認加上 class="j-table-force-nowrap"，強制列表不換行 > 2. 取消了操作列的默認固定（為了更好的移動自適應） > 如果需要固定操作列，參考此文檔 需在 `a-table` 上添加一個 屬性 :scroll="{x:true}" 即可  需在 `column` 上添加一個 屬性 fixed:"right", 同時最好指定寬度  如果需要固定選擇框，則加上屬性 `,fixed: true`  此時給非固定列字段加width也生效。 ## 三、如何刪除強制不換行樣式，切換至原始寫法 刪除樣式引入  刪除樣式屬性  ## 常見問題解答 ### 1. 操作列太窄，導致刪除提示框變形 解決方案  修改后的代碼 ``` <div style="min-width: 150px" slot="action" slot-scope="text, record"> <a @click="handleEdit(record)">編輯</a> <a-divider type="vertical" /> <a-dropdown> <a class="ant-dropdown-link">更多 <a-icon type="down" /></a> <a-menu slot="overlay"> <a-menu-item> <a-popconfirm title="確定刪除嗎?" @confirm="() => handleDelete(record.id)"> <a>刪除</a> </a-popconfirm> </a-menu-item> </a-menu> </a-dropdown> </div> ``` 改之前效果  改之后的效果