table表格过长数据隐藏，鼠标停留显示全部

1.css代码，放在<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;/* 文字自动换行 */
    }

2.效果图

 

第一条为鼠标悬停的时显示的数据，第二、三条为隐藏时的样式。

3.注意事项：

这里需要注意的一点table td:hover，如果不进行文字自动换行的设置，文字会默认在同一行进行显示

table td:hover{
    overflow: visible;/* 显示 */
}

效果如下：