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

Question

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

Answer 1

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

Answer 2

设置style，不要设置width属性
<style>.td{width:300px}</style>Web开发学习资料推荐
jqGrid分页pager配置
easyui datagrid fitColumns:true失效解决办法