jsp中的div标签添加横向滚动条无法实现是怎么回事

[yangzheng01]

我给div标签添加了style="overflow-x: scroll; width: 100%;height: 100%"属性，页面也出现了滚动条，但是无法滚动，td标签还是会压缩，我又给每个td标签设置了固定宽度width="300px" 但是没有用，这是怎么回事，怎么实现标签不压缩，可以横向滚动。

[yangzheng01]

<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>

[Go 旅城通票]

设置style，不要设置width属性

<style>.td{width:300px}</style>

Web开发学习资料推荐
jqGrid分页pager配置
easyui datagrid fitColumns:true失效解决办法