table中单元格td文字多余部分隐藏，与显示（测试正常）

最新推荐文章于 2022-11-25 18:07:32 发布

m0_54378125

最新推荐文章于 2022-11-25 18:07:32 发布

阅读量839

点赞数

文章标签： css javascript html

本文链接：https://blog.csdn.net/m0_54378125/article/details/123066638

版权

第一部分：
<style  
  table { 
    table-layout:fixed;
    }
</style>

第二部分(注意style中的内容)：
 <tr >
     <td >{{ d.yf }}</td>
     <td class="text-left info"  style="text-overflow: ellipsis; white-space: nowrap;overflow: hidden ">{{ d.plan_content }}</td>
     <td class="text-left info" style="text-overflow: ellipsis; white-space: nowrap;overflow: hidden ">{{ d.work_progress}}</td>
     <td >{{ d.start_time.strftime("%Y-%m-%d") }}</td>
     <td >{{ d.finish_time.strftime("%Y-%m-%d") }}</td>
     <td >{{ d.bz2.strftime("%Y-%m-%d") }}</td>
 </tr>

第三部分
    //鼠标移入单元格时，清除style
   $(function(){
    $("#myTable td").mouseover(function() {
         $(this).removeAttr( "style" );
     });
    //鼠标移出单元格时，增加style
    $("#myTable td").mouseout(function() {
         $(this).attr( "style",'text-overflow: ellipsis; white-space: nowrap;overflow: hidden' );
     });
    })