前端表格里的数据不换行

本文适用范围

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

前端表格里的数据不换行相关推荐

前端传表格多条数据给后台接收（HTML前端表格多条数据JSON封装后；异步提交到后台处理)
前端传表格多条数据给后台接收 (HTML前端表格多条数据JSON封装后:异步提交到后台处理) 1.多条数据采用checkBox 携带 //封装数据的对象var PayObj = { O_NBR:& ...
java poi 模板填数据库,java使用POI读取excel模版并向固定表格里填写数据详解
java使用POI读取excel模版并向固定表格里填写数据详解:public class ExportExcelDemo { private HSSFWorkbook workbook = null; ...
wps不小心删除怎么恢复_【】wps表格里的数据误删并点保存了，怎么恢复？
EXCEL里怎么恢复误删的内容? 在备份文件中找默认保存位置:C:Documentsand settings/Administrator/Applicationdata /Microsoft/Exc ...
html导入wps,wps excel导入html表格数据-WPS表格里的数据怎样快速导入到wps文字里
wps表格怎样导入txt数据由于WPS表格不支持直接将网页数据导入到表格之中,但可以使用微软Excel表格的"自网站"获取网页数据,也比较方便快捷. 使用微软office打开Ex ...
Excel表格里的数据全部变成了时间或者日期格式的时候怎么办？？？
Excel表格里的数据全部变成了时间或者日期格式的时候怎么办??? 1. 打开Excel,任意选中一单元格,单击鼠标右键,选择设置单元格格式. 2. 在数字自定义类型中,找到如图中前缀为[$-F400 ...
JS 实现两表格里的数据来回转移
最近做项目里用到了一个两个表格里数据的来回转移,用JS稍微做了下,界面也没有去弄很漂亮感觉写得有点繁琐了,有时间再改进哈 <!DOCTYPE HTML PUBLIC "-//W3C ...
把一个表格里的数据添加到另一个表格并且去重
今天做一个以前没做过的功能,本来以为挺麻烦的,试了一下觉得也不难,记录一下我的成果,有不合适的可留言指正 function(row){ this.tableList.push(row)//往目标表格里 ...
java搜索excel表格里的数据_Java读取Excel表格中的数据
前言本文主要讲述如何在Java中读取Excel表中的数据并在控制台输出,实现工具为Eclipse 提示:以下是本篇文章正文内容,下面案例可供参考一.添加jar包文件描述:在Java中导入导出Ex ...
如何在表格里修改数据
如何在表格里直接修改数据有些时候整个table表只有一处需要修改数据,那么直接在表格里修改比点击修改弹出一个dialog再做修改效率更高体验也更好. 实现方法:在需要改的地方利用插槽添加Form即可 ...

前端表格里的数据不换行

本文适用范围

ant-design中的表格

html原生表格

前端表格里的数据不换行相关推荐

最新文章

热门文章