社区
JavaScript
帖子详情
jsp中的div标签添加横向滚动条无法实现是怎么回事
yangzheng01
2018-03-21 08:55:07
我给div标签添加了style="overflow-x: scroll; width: 100%;height: 100%"属性,页面也出现了滚动条,但是无法滚动,td标签还是会压缩,我又给每个td标签设置了固定宽度width="300px" 但是没有用,这是怎么回事,怎么实现标签不压缩,可以横向滚动。
...全文
666
2
打赏
收藏
jsp中的div标签添加横向滚动条无法实现是怎么回事
我给div标签添加了style="overflow-x: scroll; width: 100%;height: 100%"属性,页面也出现了滚动条,但是无法滚动,td标签还是会压缩,我又给每个td标签设置了固定宽度width="300px" 但是没有用,这是怎么回事,怎么实现标签不压缩,可以横向滚动。
复制链接
扫一扫
分享
转发到动态
举报
写回复
配置赞助广告
用AI写文章
2 条
回复
切换为时间正序
请发表友善的回复…
发表回复
打赏红包
斯洛文尼亚旅游
2018-03-21
打赏
举报
回复
设置style,不要设置width属性
<style>.td{width:300px}</style>
Web开发
学习资料推荐
jqGrid分页pager配置
easyui datagrid fitColumns:true失效解决办法
yangzheng01
2018-03-21
打赏
举报
回复
<div style="overflow-x: scroll; width: 100%;height: 100%"> <table class="rstable" style="overflow-x: scroll; width: 100%;height: 100%"> <tr class="table_header" style="overflow-x: scroll; width: 100%;height: 100%"> <td id="display_name" width="300px">年/班级</td> <td id="user_name" width="300px">用户名称</td> <td id="student_code" width="300px">学号</td> <td id="status" width="300px">状态</td> <td id="registration_time" width="300px">注册时间</td> <td id="mac" width="300px">MAC</td> <td width="300px">操作</td> <td width="300px">锁屏<input type="checkbox" name="devices" onclick="selectAll()"/></td> <td width="300px">摄像头<input type="checkbox" name="cameras" onclick="selectAllCameras()"/></td> <td width="300px">WiFi<input type="checkbox" name="cameras" onclick="selectAllCameras()"/></td> <td width="300px">蓝牙<input type="checkbox" name="cameras" onclick="selectAllCameras()"/></td> <td width="300px">相机<input type="checkbox" name="cameras" onclick="selectAllCameras()"/></td> <td width="300px">相机<input type="checkbox" name="cameras" onclick="selectAllCameras()"/></td> <td width="300px">相机<input type="checkbox" name="cameras" onclick="selectAllCameras()"/></td> <td width="300px">相机<input type="checkbox" name="cameras" onclick="selectAllCameras()"/></td> <td width="300px">相机<input type="checkbox" name="cameras" onclick="selectAllCameras()"/></td> <td width="300px">相机<input type="checkbox" name="cameras" onclick="selectAllCameras()"/></td> <td width="300px">相机<input type="checkbox" name="cameras" onclick="selectAllCameras()"/></td> <td width="300px">相机<input type="checkbox" name="cameras" onclick="selectAllCameras()"/></td> <td width="300px">相机<input type="checkbox" name="cameras" onclick="selectAllCameras()"/></td> </tr> <% String sql=" from android_identification a"; if(scope_type.equals("0")) { sql+=" where 1=1 "; } else if(scope_type.equals("1")) //学校 { sql+=" join class on a.class_id=class.id where school_id="+scope_id; if(class_type.equals("1")) { sql+=" and class.grade<>0 "; } else if(class_type.equals("2")) { sql+=" and class.grade=0 "; } } else { sql+=" where class_id="+scope_id; } if(!search_text.equals("")) { sql+=" and (a.name like '%"+search_text+"%' or a.mac like '%"+search_text+"%' or " +" a.student_code like '%"+search_text+"%')"; } long now=new Date().getTime()/1000; if(i_off_line_days!=0) { long min_last_active_time=now-i_off_line_days*86400; sql+=" and last_active_time<=FROM_UNIXTIME("+min_last_active_time+")"; } else if(b_online) { long min_last_active_time=now-ACTIVE_TIME; sql+=" and last_active_time>=FROM_UNIXTIME("+min_last_active_time+")"; } sql+=" and codes<>'' "; String count=connection.Fetch_one_field("select count(*) "+sql); if(sort_field.equals("display_name")) { sql+=" order by class.grade,class.name "+sort_type; } else if(!sort_field.equals("")) { sql+=" order by "+sort_field+" "+sort_type; } int begin_index=i_page_number*10; sql="select a.name,a.is_lock,a.is_camera_lock,a.student_code,UNIX_TIMESTAMP(a.last_active_time) as last_active_time,a.id,a.mac,class_id,creating_time " +sql+" limit "+begin_index+",10"; ResultSet rs=connection.executeQuery(sql); int index=begin_index; //是否设置锁屏 String isAbled = ""; //是否限制相机 String cameraStatus = ""; while(rs.next()) { index++; long last_active_time=rs.getLong("last_active_time"); long diff=now-last_active_time; String status=""; if(diff>90*86400) { status="90日未登录"; } else if(diff>7*86400) { status="7日未登录"; } else if(diff>ACTIVE_TIME) { status="离线"; } else { status="在线"; } int device_id = rs.getInt("id"); String isLock = rs.getString("is_lock"); if("1".equals(isLock)){ isAbled = "checked='checked'"; }else{ isAbled = ""; } String isCameraLock = rs.getString("is_camera_lock"); if("1".equals(isCameraLock)){ cameraStatus = "checked='checked'"; }else{ cameraStatus = ""; } ResultSet rs_class=connection.executeQuery("select * from class where id="+rs.getString("class_id")); rs_class.next(); String display_name=CClassUtility.Build_class_display_name(rs_class); int grade=rs_class.getInt("grade"); %> <tr class="table_row"> <td><%=display_name %></td> <td><%=rs.getString("name") %></td> <td><%=rs.getString("student_code") %></td> <td><%=status%></td> <td><%=rs.getString("creating_time") %></td> <td><%=rs.getString("mac") %></td> <td><a href="Device/Device_detail.jsp?id=<%=device_id %>">详情</a> <% if(grade!=0) { %> <a href="Device/Device_log.jsp?id=<%=device_id %>">日志</a> <a href="javascript:Delete_device(<%=device_id %>);">删除</a> <% } %> <td> <input type="checkbox" name="isEnabled" id=<%=device_id%> value="<%=device_id%>" <%=isAbled%> onclick="checkEnabled(this.value);"/> </td> <td> <input type="checkbox" name="isCamera" id=<%=device_id+"c"%> value="<%=device_id%>" <%=cameraStatus%> onclick="checkCarmeraLock(this.id,this.value);"/> </td> </tr> <% } %> </table> </div>
jsp
中
为表格
添加
水平
滚动条
的
实现
方法
首先,本项目
中
使用的是bootstrap框架,因此有些人会说,给表格设置自适应属性就可以了 这里要申明的是 bootsrtap自适应是针对当浏览器不占满整个屏幕,而是一半的时候才会出现
横向
的
滚动条
而当我们将浏览器最大化的时候,如果列数增多了呢?会出现什么效果 答案就是会出现挤压的效果,
横向
并不会出现
滚动条
查看网上的教程,很多人都说将什么父
div
设置100%,table
添加
scrool属性均不可 这里,解决的方法很简单,设置
标签
的属性即可,让其不要自动换行 $(document).ready(function() { $(th).css(white-space,
jsp
中
实现
带
滚动条
的table表格实例代码
下面小编就为大家带来一篇
jsp
中
实现
带
滚动条
的table表格实例代码。小编觉得挺不错的,现在就分享给大家,也给大家做个参考。一起跟随小编过来看看吧
2021-2022计算机二级等级考试试题及答案No.2323.docx
2021-2022计算机二级等级考试试题及答案No.2323.docx
html/
jsp
中
table
标签
如何
添加
横向
滚动条
有时候table
标签
会有很多列,这样会把列的宽度压缩,变的非常不美观,也不好浏览,列入这样<body> <table border="1" width="600px" height="120px" align="center"> <tr> <td>姓名</td>
jsp
页面
添加
取消
滚动条
去掉水平
滚动条
: 去掉竖直
滚动条
: 隐藏
横向
滚动条
,显示纵向
滚动条
: 全部隐藏 或者是 如果是框架页,利用上面的方法仍不能去除可考虑以下办法: 被包含页面里加入 html { overflow-x:hidden; } 如果想隐藏垂直
滚动条
: html { overflow-y:hidden; } 这里先说一下滚
JavaScript
87,976
社区成员
224,702
社区内容
发帖
与我相关
我的任务
JavaScript
Web 开发 JavaScript
复制链接
扫一扫
分享
社区描述
Web 开发 JavaScript
社区管理员
加入社区
获取链接或二维码
近7日
近30日
至今
加载中
查看更多榜单
社区公告
暂无公告
试试用AI创作助手写篇文章吧
+ 用AI写文章