普通css实现table表格过长数据隐藏,鼠标停留显示全部

发布时间 2023-03-22 21:11:26作者: 坚强的小蚂蚁

在<style></style>中添加下面代码

    table {
        table-layout: fixed; /* 只有定义了表格的布局算法为fixed,下面td的定义才能起作用。 */
    }
 
    table td {
        position: relative;
        /*width: 80px;*/
        height: 20px;
        text-align: center;
        font-weight: normal;
 
        width: 100%;
        word-break: keep-all; /* 不换行 */
        white-space: nowrap; /* 不换行 */
        overflow: hidden; /* 内容超出宽度时隐藏超出部分的内容 */
        text-overflow: ellipsis; /* 当对象内文本溢出时显示省略标记(...) ;需与overflow:hidden;一起使用。*/
    }
 
    table td:hover {
        overflow: visible;/* 显示 */
        white-space: normal;/* 允许文字自动换行 */
        word-wrap: break-word;/* 文字自动换行 */
    }