如果页面表格里的内容过长,设置隐藏显示的两种方法

方法一


我使用了方法一但是没有成功,问题是表格的宽度会随着内容的长短而变化,找不到问题的症结所以尝试的方法二。

方法二:

做法基本上和方法一相同,最重要的区别是方法二借助div实现,具体如下:

1>jsp页面上代码:

<td class="la" ><div id="nys" title="<%=tem.getTitle()%>"><%=tem.getTitle()%></div></td>
    
注:1> <%=tem.getTitle()%>是和后端交互后显示的文本内容,也就是过长的话被隐藏显示的文本。
    2> title属性实现的功能为鼠标悬停后显示出全部内容

           

 2>css中代码:

#nys{
	 text-overflow: ellipsis; //被隐藏的用省略号代替
	 overflow: hidden;//过长内容被隐藏
	 white-space: nowrap; //不换行
	 width:250px;//超过这个宽度就会被隐藏
}
如上,即可实现要求的功能。


  • 0
    点赞
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
可以通过媒体查询来实现页面在不同设备上的不同呈现方式。具体实现步骤如下: 1. 在页面中添加两种不同的展示方式,一种是表格,另一种是卡片。 2. 使用CSS媒体查询来检测设备的屏幕宽度,当屏幕宽度小于某个阈值时,切换到卡片展示方式,否则使用表格展示方式。 3. 在CSS中使用@media指令,设置不同屏幕宽度下的样式。 示例代码如下: ```css /* PC端表格展示 */ .table-container { display: block; /* 默认为块级元素 */ } /* 移动端卡片展示 */ @media (max-width: 767px) { .table-container { display: none; /* 隐藏表格 */ } .card-container { display: block; /* 显示卡片 */ } } ``` 其中,`max-width: 767px`指的是屏幕宽度小于767px时,应用媒体查询样式。 在HTML中,可以将表格和卡片容器都添加到页面中,然后根据设备屏幕宽度的不同,通过CSS来控制展示方式。示例代码如下: ```html <!-- 表格容器 --> <div class="table-container"> <table> <tr> <th>名称</th> <th>数量</th> <th>价格</th> </tr> <tr> <td>商品1</td> <td>10</td> <td>100元</td> </tr> <tr> <td>商品2</td> <td>20</td> <td>200元</td> </tr> </table> </div> <!-- 卡片容器 --> <div class="card-container"> <div class="card"> <div class="card-header">商品1</div> <div class="card-body"> <div>数量:10</div> <div>价格:100元</div> </div> </div> <div class="card"> <div class="card-header">商品2</div> <div class="card-body"> <div>数量:20</div> <div>价格:200元</div> </div> </div> </div> ``` 通过上述实现,就可以在同一页面中,在PC端使用表格展示数据,在移动端使用卡片展示数据。

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值