1、css部分
为表格的td的css设置以下,就会进行隐藏
white-space: nowrap; //不换行
overflow: hidden;//隐藏
text-overflow: ellipsis;//使用...代替
注:
为table设置css:
<table style="table-layout:fixed"> //如果不设置此属性,在table表格不生效
以上的属性实现则会达到表格td内容隐藏效果。
2、js部分
为td设置内容 title=“td元素内容”,将鼠标移至上面,则会显示td全部内容
代码如下:
var trList= $("tbody").children("tr");//获取tr,遍历
for(var i =0;i<;i++){
var tdArr = (i).find("td");//获取td遍历
for(var j=0;j<;j++){
var tdText = (j).text();//获取td内容
(j).attr("title",tdText);//设置title
}
}
3、为td设置以下css,当鼠标移到表格上,会出现滚动条
tbody tr td:hover{ /* 鼠标滑过,显示隐藏内容,滚动条 */
overflow:auto;
text-overflow:clip;
}
注:设置title主要出现全部内容,css会出现滚动条