table固定列,超出长度显示省略号,鼠标移上去可以小框完整展示,a标签置灰不可点击

用max-width限制列最大宽度,可以保持table的自适应属性,不然用width=100px限制列宽时需要table上加上

 style="table-layout:fixed" 然后就可以给 th 和 td设置固定宽度了,不设置的td宽度会自适应.

table-layout有三个属性值:auto、fixed、inherit。
auto:默认,自动表格布局,列宽度由单元格中没有折行的最宽的内容设定。此算法有时比较慢,这是由于它需要在确定最终的布局之前访问表格中所有的内容。
fixed:固定表格布局,水平布局仅仅取决于表格宽度、列宽度、表格边框宽度、单元格间距、而与单元格的内容无关。与自动表格布局相比,允许浏览器更快地对表格进行布局。通过固定表格布局用户代理在接收到第一行后就可以显示表格。
inherit:从父元素继承table-layout属性的值,任何版本的IE都不支持。

固定列加上样式

  • white-space: nowrap; //不换行

  • text-overflow: ellipsis; //超出部分用....代替

  • overflow: hidden; //超出隐藏

如果需要鼠标移动过去的时候显示全部文字,也很简单,给title赋值就可以了。

列内容自动换行。

a标签置灰且不可点击

加入href =”javascript:return false;” 可以实现不可点击功能
加入style=”opacity: 0.2”可以实现变灰的效果

  • 1
    点赞
  • 2
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值