table td内容过长,自动隐藏使用...代替,当鼠标放在上面,自动显示全部内容

时间:2025-03-19 10:46:15

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会出现滚动条