`
wangyijiangshui
  • 浏览: 83275 次
  • 性别: Icon_minigender_1
  • 来自: 合肥
社区版块
存档分类

table展示数据 数据过长截断的解决方案

CSS 
阅读更多
1、我们在使用table展示数据时,有时有些字段内容比较长,如果全部展示,td将会换行,页面将会很难看,此时可以采用截断过长字符串的方法来解决,但是用户在查看时可能还要查看所有详细的信息,此时的解决方案有:
  
    比如现在有一个比较长的字段要展示在table中:
    content = “我的内容比较长我的内容比较长我的内容比较长我的内容比较长”
    截断后:
    content1 = “我的内容比较长但被截断....”


  ①、最简单的解决方案:采用table的td自己的属性来解决:如下
   <table>
      <tr>
          <td title="<%=content%>"><%=content1%></td>
      </tr>
   </table>
此时页面table中展示的将是截断后的字符串,但当鼠标指向对应的td区域时将会在鼠标的边上弹出一个类似层的窗口显示所有详细的内容(也就是存放在title属性中的内容)

   ②、页面提供一个记录信息详细查看的功能。与上一个解决方案相比,该功能的实现需要从后台从新加载对应记录的详细信息,比较麻烦。

   ③、使用js控制实现。

   ④、使用css来控制实现,相对第一种解决方案,该方案更好。

注:方案③和④的具体实现,有时间我会详细的写出来。
  
分享到:
评论

相关推荐

Global site tag (gtag.js) - Google Analytics