本文適用范圍

1，ant-design中的表格
2，html原生表格

ant-design中的表格

如圖，其中style是關鍵，設置一個overflow，設置寬度百分百，高度不要設置，套在表格外面的DIV，設置一個固定的寬度，比如500px，用來設置你的整個表格的寬度，他就會在你給定的寬度里面左右滑動

<a-table:columns="columns":data-source="tableData"bordered:pagination="{showQuickJumper:true,pageSize:5,size:'small'}"style="width:100%;overflow:auto"/>

同時CSS代碼，這個是最關鍵的，加上deep保證他生效

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

html原生表格

原生表格經常設置寬度不生效，我也不知道為啥，只能設置總寬度，然后他會每一列會均分寬度，導致我們的表格，但是有的時候確實又是需要這種表格，自己寫tr th td的這種。這個時候就用我這個代碼就可以了
主要是CSS代碼

其中table里面的table-layout: fixed是關鍵，設置了這個之后，就可以在下面那里設置每個的分寬度了。比如我設置的是th td都是80px，不用再去均分表格的總寬度了，他可以每個設置寬度，來撐開表格。

table {border-collapse: collapse; //表格單元格間距樣式border: 1px solid #EAE6EF;// text-align: center;font-size: 15px;margin-top: 20px;table-layout: fixed } th {padding: 10px;width: 80px; } td {padding: 10px;width: 80px; }

總結

以上是生活随笔為你收集整理的前端表格里的数据不换行的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。