bootstrap-table 内容超出鼠标悬浮显示全部

梦里梦外; 2023-02-24 15:29 45阅读 0赞

[https://www.cnblogs.com/tongsi/p/12703047.html][https_www.cnblogs.com_tongsi_p_12703047.html]

.table th, .table td \{  
            text-align: center;  
            vertical-align: middle !important;  
        \}

table \{  
            width: 100px;  
            table-layout: fixed; /\* 只有定义了表格的布局算法为fixed，下面td的定义才能起作用。 \*/  
        \}

td \{  
            width: 100%;  
            word-break: keep-all; /\* 不换行 \*/  
            white-space: nowrap; /\* 不换行 \*/  
            overflow: hidden; /\* 内容超出宽度时隐藏超出部分的内容 \*/  
            text-overflow: ellipsis; /\* 当对象内文本溢出时显示省略标记(...) ；需与overflow:hidden;一起使用\*/  
            -o-text-overflow: ellipsis;  
            -icab-text-overflow: ellipsis;  
            -khtml-text-overflow: ellipsis;  
            -moz-text-overflow: ellipsis;  
            -webkit-text-overflow: ellipsis;  
        \}

.table \{  
            table-layout: fixed;  
        \}

onLoadSuccess: function () \{  
                $('.bootstrap-table tr td').each(function () \{  
                    $(this).attr("title", $(this).text());  
                    $(this).css("cursor", 'pointer');  
                \});

/\* 固定表头 \*/  
.overflow \{  
    white-space:nowrap;   
    overflow:hidden;        
    text-overflow:ellipsis;  
\}

table tbody \{  
    display:block;  
    height:500px;  
    overflow-y:scroll;  
\}  
   
table thead, tbody tr \{  
    display:table;  
    width:100%;  
    table-layout:fixed;  
\}  
   
table thead \{  
    width: calc( 100% - 0.8em )  
\}

[https_www.cnblogs.com_tongsi_p_12703047.html]: https://www.cnblogs.com/tongsi/p/12703047.html