css实现table中td单元格鼠标悬浮时显示更多内容

Posted 2020-06-16

table中，td单元格无法显示下全部内容，需要在鼠标hover时显示全部内容。

正常显示样式：

鼠标hover时：

html：

<td>displayAddress<span class="tdtip">popAddress</span></td>

css：

td{
    position:relative; 
    z-index:2;
}
td:hover{
    z-index:3;
    background:none; 
}
td .tdtip  {
    display: none;
}
td:hover .tdtip  { 
    display: block;
    position: absolute;
    top: 8px; 
    background-color: whitesmoke;
    color: royalblue;
    word-break: break-all;
}