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

时间:2021-06-09 19:41:32

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

正常显示样式:

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

鼠标hover时:

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

html:

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

css:

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