一、 实现思路

我们都知道让溢出内容变成...,只需要以下:

overflow: hidden;
text-overflow:ellipsis;
white-space: nowrap;

表格里的内容直接引用这段代码可不行。

因为table的宽度我们并不能控制,我们加的内容会自动撑大表格列表宽度.

关键的一步是给table加上一个样式:table-layout:fixed;

这条属性就是让table的内部布局固定大小

归纳总结Table要实现这个功能,需要这几个条件:

  1. table宽度可控: table-layout:fixed;
  2. 父层(table)宽度固定,并且设置超出隐藏:
width: 500px;
overflow: hidden;
  1. 应用的列加上以下样式:
white-space: nowrap;        //强制不换行
overflow: hidden; //超出部分隐藏
text-overflow: ellipsis; //显示省略符号来代表被修剪的文本

二、 普通Table

为了美观,加了一些css样式,大家可以忽略,重点看带有***的即可

//css
<style>
table{
table-layout:fixed; //******
} .gridtable {
width: 500px; //******
overflow: hidden; //******
font-family: verdana,arial,sans-serif;
font-size:11px;
color:#333333;
border-width: 1px;
border-color: #666666;
border-collapse: collapse;
margin: 20px auto;
text-align: center;
}
.gridtable th {
border-width: 1px;
padding: 8px;
border-style: solid;
border-color: #666666;
background-color: #dedede;
}
.gridtable td {
border-width: 1px;
padding: 8px;
border-style: solid;
border-color: #666666;
background-color: #ffffff;
}
.personInfo{
white-space: nowrap; //******
overflow: hidden; //******
text-overflow: ellipsis;//******
}
</style> //html
<table class="gridtable">
<tr>
<th style="width:100px">姓名</th>
<th style="width:100px">年龄</th>
<th class="personInfo">信息</th>
</tr>
<tr>
<td>xiaobe</td>
<td>18</td>
<td class="personInfo">aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaabaaaaaaa</td>
</tr>
<tr>
<td>xiaobi</td>
<td>20</td>
<td class="personInfo">bbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbabbbbbbb</td>
</tr>
</table>

效果:

三、 ANT Design实现

//css
table{
table-layout:fixed;
}
.resultColumns{
overflow: hidden;
}
.resultColumnsDiv{
width:92%;
word-break: keep-all;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
//html
let columns = [
{
title: '姓名',
dataIndex: 'name',
key: 'name',
width: 150
}, {
title: '年龄',
dataIndex: 'age',
key: 'age',
width: 350,
}, {
title: '信息',
dataIndex: 'info',
key: 'info',
className: styles.resultColumns,
render:
(text, record) => (
<div title={record.result} className={styles.resultColumnsDiv}>{record.result}</div>
),
},
]
let detectList = [{
key: 1,
name: 'xiaobe',
age: 18,
info: 'aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaabaaaaaaa'
},{
key: 2,
name: 'xiaobi',
age: 20,
info: 'bbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbabbbbbbb'
},] <Table
className={styles.detectListTable}
dataSource={detectList}
columns={columns}
/>

注意: 我们可以不用给省略的列加宽度,给其他的列固定宽度后,antd会自动计算该列的宽度.

如果三列都设置了宽度,会导致无效的。antd还是会按照原来百分比计算

因为引入antd比较麻烦,所以就没有放出效果图。有什么疑问,欢迎留言

table固定列的宽度,超出部分用…代替(针对普通table和antd)的更多相关文章

  1. html table 固定列

    css固定列: .td1{ position: sticky; z-index: 1; left:0; }

  2. 关于bootstrap table 固定列宽

    首先为table 设置 style="table-layout: fixed;" <table id="assessStage" data-height= ...

  3. ivew Table 固定列设置后,底部拖拽的横轴被覆盖拉不动

    原因:设置了max-height=500px:表格最大高度,单位 px,设置后,如果表格内容大于此值,会固定表头.去掉即可.

  4. bootstrap table实现iview固定列的效果

    因为bootstrap自带的固定列效果满足不了公司需求,所以借助fixed-table这个插件完成了iview固定列的效果 <!DOCTYPE html> <html lang=&q ...

  5. 纯css实现table表格固定列和表头,中间横向滚动的思路-附案例

    最近做的后台管理系统要处理大量的表格 原项目是采用的for循环加拼接字符串的方式实现;导致js代码一大堆;各种单引号和双引号的嵌套;让人头疼;遂引入vue.js;用v-for做模板渲染;工作量顿时减轻 ...

  6. layui table 数据表格固定列的行高和table其他列的行高不一致

    1.问题描述:使用layui的table数据表格,固定某一列,这样表格中数据的宽度超出屏幕宽度时,固定列可以一直显示在屏幕中,不会随着底部滚动栏左右的拖动而变化位置.但是遇到一个问题,就是固定列的行高 ...

  7. table固定前两列和最后一列,其他滑动显示

    网上搜的基本都是4个table做的,数据处理比较麻烦,写了个一个table的,此示例只固定了前两列和最后一列,和网上的不太一样. 网上搜的基本都是4个table做的,数据处理比较麻烦,写了个一个tab ...

  8. html table 固定表头和列

    /**************************************************************** jQuery 插件. 功能: 固定表格标题行或列头 Version: ...

  9. vue中获取滚动table的可视页面宽度,调整表头与列对齐(每列宽度不都相同)

    mounted() { // 在mounted中监听表格scroll事件 this.$refs.scrollTable.addEventListener( 'scroll',(event) => ...

随机推荐

  1. GUI常用对象介绍2

    %示意line对象的用法 hf=figure; hl=plot([:]); %示意line对象的属性 get(hl) %设置line的颜色 set(hl,'Color','r'); %设置每个点形状 ...

  2. [转载]C# 常用日期时间函数(老用不熟)

    原博地址:http://www.jb51.net/article/20181.htm --DateTime 数字型 System.DateTime currentTime=new System.Dat ...

  3. Spring MVC 编程流程步骤

    Spring MVC 编程流程步骤 1. 建立Maven工程 2. 添加Spring MVC依赖 <dependencies> <dependency> <groupId ...

  4. Spring Advice

    Spring AOP(面向方面编程)框架,用于在模块化方面的横切关注点.简单得说,它只是一个拦截器拦截一些过程,例如,当一个方法执行,Spring AOP 可以劫持一个执行的方法,在方法执行之前或之后 ...

  5. QQ项目

    QQ第一部分: 1.数据库 每一个QQ账户必须有  a. state:是否上线的状态  b. IP:正在上线的主机的IP  c. port:UDP端口号(用这个和别的好友通讯)  注:TCP连接时,在 ...

  6. MediaCodec在Android视频硬解码组件的应用

    https://yq.aliyun.com/articles/632892 云栖社区> 博客列表> 正文 MediaCodec在Android视频硬解码组件的应用   cheenc 201 ...

  7. [Android相机]通过手机摄像头识别环境亮度(转)

    源: [Android相机]通过手机摄像头识别环境亮度 iOS利用摄像头获取环境光感参数

  8. 今日总结(linux和plsql)

    #case ...when语句(根据字段不同值显示不同结果) ##1)case ...when语句的使用方法一: 语法格式: case column_name when value1 then res ...

  9. 手头没证书,如何给https做代理?Nginx TCP转发

    线上的一个海外充值接口(https)经常因我朝网络问题中断,想借助hk的机器做个https反向代理又没证书. 一开始 一开始想到的办法是借助Nginx的tcp转发进行代理: 编译NGINX时加入 -- ...

  10. 值得收藏的8个Web端组件库

    值得收藏的8个Web端组件库 Ant Design 介绍:一个服务于企业级产品的设计体系,基于『确定』和『自然』的设计价值观和模块化的解决方案,让设计者专注于更好的用户体验. 组件库地址:https: ...