本文適用范圍

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

ant-design中的表格

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

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

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

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

html原生表格

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

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

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; }

總結(jié)

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

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