普通css实现table表格过长数据隐藏,鼠标停留显示全部
在<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;/* 文字自动换行 */
}
努力生活,融于自然