一、 实现思路

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

  1. overflow: hidden;
  2. text-overflow:ellipsis;
  3. white-space: nowrap;

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

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

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

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

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

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

二、 普通Table

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

  1. //css
  2. <style>
  3. table{
  4. table-layout:fixed; //******
  5. }
  6. .gridtable {
  7. width: 500px; //******
  8. overflow: hidden; //******
  9. font-family: verdana,arial,sans-serif;
  10. font-size:11px;
  11. color:#333333;
  12. border-width: 1px;
  13. border-color: #666666;
  14. border-collapse: collapse;
  15. margin: 20px auto;
  16. text-align: center;
  17. }
  18. .gridtable th {
  19. border-width: 1px;
  20. padding: 8px;
  21. border-style: solid;
  22. border-color: #666666;
  23. background-color: #dedede;
  24. }
  25. .gridtable td {
  26. border-width: 1px;
  27. padding: 8px;
  28. border-style: solid;
  29. border-color: #666666;
  30. background-color: #ffffff;
  31. }
  32. .personInfo{
  33. white-space: nowrap; //******
  34. overflow: hidden; //******
  35. text-overflow: ellipsis;//******
  36. }
  37. </style>
  38. //html
  39. <table class="gridtable">
  40. <tr>
  41. <th style="width:100px">姓名</th>
  42. <th style="width:100px">年龄</th>
  43. <th class="personInfo">信息</th>
  44. </tr>
  45. <tr>
  46. <td>xiaobe</td>
  47. <td>18</td>
  48. <td class="personInfo">aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaabaaaaaaa</td>
  49. </tr>
  50. <tr>
  51. <td>xiaobi</td>
  52. <td>20</td>
  53. <td class="personInfo">bbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbabbbbbbb</td>
  54. </tr>
  55. </table>

效果:

三、 ANT Design实现

  1. //css
  2. table{
  3. table-layout:fixed;
  4. }
  5. .resultColumns{
  6. overflow: hidden;
  7. }
  8. .resultColumnsDiv{
  9. width:92%;
  10. word-break: keep-all;
  11. white-space: nowrap;
  12. overflow: hidden;
  13. text-overflow: ellipsis;
  14. }
  15. //html
  16. let columns = [
  17. {
  18. title: '姓名',
  19. dataIndex: 'name',
  20. key: 'name',
  21. width: 150
  22. }, {
  23. title: '年龄',
  24. dataIndex: 'age',
  25. key: 'age',
  26. width: 350,
  27. }, {
  28. title: '信息',
  29. dataIndex: 'info',
  30. key: 'info',
  31. className: styles.resultColumns,
  32. render:
  33. (text, record) => (
  34. <div title={record.result} className={styles.resultColumnsDiv}>{record.result}</div>
  35. ),
  36. },
  37. ]
  38. let detectList = [{
  39. key: 1,
  40. name: 'xiaobe',
  41. age: 18,
  42. info: 'aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaabaaaaaaa'
  43. },{
  44. key: 2,
  45. name: 'xiaobi',
  46. age: 20,
  47. info: 'bbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbabbbbbbb'
  48. },]
  49. <Table
  50. className={styles.detectListTable}
  51. dataSource={detectList}
  52. columns={columns}
  53. />

注意: 我们可以不用给省略的列加宽度,给其他的列固定宽度后,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. php 获取ip地址的5种方法,插入用户登录日志实例

    php 获取ip地址的5种方法,插入用户登录日志实例,推荐使用第二种方法 <?php //方法1: $ip = $_SERVER["REMOTE_ADDR"]; echo $ ...

  2. Django 自定义

    from django.db import models class MyCharfield(models.Field): def __init__(self,max_length,*args,**k ...

  3. 搭建ELK日志分析(亲测无毒!)截图没有附上。。凑合看。搭建出来没有问题

    ( 1 )安装 Logstash 依赖包 JDK Logstash 的运行依赖于 Java 运行环境, Logstash 1.5 以上版本不低于 java 7 推荐使用最新版本的 Java .由于我们 ...

  4. 浏览器从输入URL到页面加载显示完成全过程解析

    一 浏览器查找域名对应的 IP 地址(域名解析的过程,先进行缓存的查看): 1.在浏览器中输入www.qq.com域名,操作系统会先检查自己本地的hosts文件是否有这个网址映射关系,如果有,就先调用 ...

  5. SVN的标准目录结构

    SVN目录规范 在visualSVN中创建仓库时,可以选择svn目录结构 Trunk主干目录,此目录下的文件为基准文件. Brancher 用于开发的分支目录 Tags用于发布的版本目录 假设有一个项 ...

  6. svn钩子

    #!/bin/sh #修改为服务编码 export.UTF-8 #Set variable REPOS="$1" REV="$2" #svn安装脚本目录 SVN ...

  7. 利用Python实现多线程聊天功能

    #-*- coding:utf-8 -*- from threading import Thread from socket import * #1.实现接收消息 def recvDate(): wh ...

  8. GO语言学习笔记之Linux环境下安装GO语言

    0x00 安装环境和GO版本 本篇是源码安装,非使用包管理工具安装. # Centos 7.4 # GO v1.11.2 0x01 下载GO安装包 # wget https://dl.google.c ...

  9. 树莓派dhcp server

    首先安装isc-dhcp-server apt-get install isc-dhcp-server 然后编辑配置文件,选择需要开启dhcp服务器的网卡 vi /etc/default/isc-dh ...

  10. visual studio 2015下使用gcc调试linux c++开发环境搭建完整详解

    一直以来,相信绝大部分的开发都是windows/mac下做开发,尤其是非嵌入式和qt系的,而开源服务器程序绝大部分都是跑在Linux下,几乎就没有跑在windows下的.一直以来开发人员都是在wind ...