前端表格里的数据不换行

最新推荐文章于 2023-09-19 21:04:39 发布

原创最新推荐文章于 2023-09-19 21:04:39 发布 · 1.1k 阅读

3 ·

CC 4.0 BY-SA版权

文章标签：

#html #css #web #vue.js

html 专栏收录该内容

17 篇文章

订阅专栏

本文适用范围

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