css实现鼠标移入table时出现滚动条且table内容不移位

  • Post author:
  • Post category:其他


一般是这样: 表格的标题和内容分别由一个table组成,其中表格内容的table由一个class=”table-body”的div包裹.css如下

.tContainer .table-body{height:134px;overflow:hidden;}
.tContainer .table-body:hover{overflow-y:auto;}

效果如下:

Citi Commodities Pre-Roll GSCI F0 CVICG0ER
Citi Commodities Pre-Roll GSCI F0 CVICG0ER
Citi Commodities Pre-Roll GSCI F0 CVICG0ER
Citi Commodities Pre-Roll GSCI F0 CVICG0ER
Citi Commodities Pre-Roll GSCI F0 CVICG0ER

缺点很明显,由于滚动条的宽度也占用了一部分表格宽度,鼠标移入时表格内容向左偏移了。

改进的方法,效果如下:

Citi Commodities Pre-Roll GSCI F0 CVICG0ER
Citi Commodities Pre-Roll GSCI F0 CVICG0ER
Citi Commodities Pre-Roll GSCI F0 CVICG0ER
Citi Commodities Pre-Roll GSCI F0 CVICG0ER
Citi Commodities Pre-Roll GSCI F0 CVICG0ER

css code:

.tContainer .table-body2{height:100px;overflow:hidden;}
.tContainer .table-body2:hover{overflow-y:auto;}
.tContainer .table-body2 td:last-child{padding-right:17px;}
.tContainer .table-body2:hover{margin-left:-17px;}
.tContainer .table-body2:hover table{margin-left:17px;}

其中17px代表滚动条的宽度。解决方法是:hover之前通过td:last-child的padding-right预留出滚动条的宽度,hover时通过margin-left:-17px;增加table由于滚动条出现导致的额外宽度,这样table各列的宽度就不会因为出现滚动条而变小了,最后通过table的margin-left:17px;把table位置归位,就不会出现因为滚动条导致table内容左移的现象了。

补充:table column的text-overflow: ellipsis;

一般文字内容放不下时,希望出现…的css code:

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

对于table column的css code:

overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
max-width: 0;

转载于:https://www.cnblogs.com/yigeqi/p/5488554.html