antd table 宽度_table固定列的宽度,超出部分用…代替(针对普通table和antd)

一、 实现思路

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

overflow: hidden;

text-overflow:ellipsis;

white-space: nowrap;

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

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

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

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

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

table宽度可控: table-layout:fixed;

父层(table)宽度固定,并且设置超出隐藏:

width: 500px;

overflow: hidden;

应用的列加上以下样式:

white-space: nowrap; //强制不换行

overflow: hidden; //超出部分隐藏

text-overflow: ellipsis; //显示省略符号来代表被修剪的文本

二、 普通Table

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

//css

table{

table-layout:fixed; //******

}

.gridtable {

width: 500px; //******

overflow: hidden; //******

font-family: verdana,arial,sans-serif;

font-size:11px;

color:#333333;

border-width: 1