在做CRM界面的时候遇到的DIV滚动条自动显示的问题!!和解决方法!
其实只要用CSS的 table-layout:fixed; 就可以了,注意的是。如果是有表头话就要就要把最外的TABLE的width 和height设成100%,这样DIV有参照值,才能根据数据的情况自动出现滚动条!
.tblayout { table-layout:fixed; border-top: 1px solid #BACCDD; border-right: 0px none;border-bottom: 0px none;border-left: 1px solid #BACCDD; cursor: hand;} /*表格宽度固定*/
------------------------------------------------------------------------------------------
<body topmargin="0" style="overflow-x:hidden;overflow-y:hidden" onLoad="parent.loadNum = parent.loadNum + 1;">
<table width="100%" height="100%" border="0" cellpadding="0" cellspacing="0">
<tr>
<td height="20" align="right" id="background-image">
<!--增删改panel-->
<table width="99%" border="0" cellpadding="0" cellspacing="0" id="table">
<tr>
<td id="td_background">
<beacon:BUTTON id="button" menuID="M_070207">
<onclick>opByPageObjectValue('nonAlert','uid','')</onclick>
<img src="<c:out value='${root}'/>/common/main-images/add.gif" width="15" height="13">
</beacon:BUTTON>
<beacon:BUTTON id="button" menuID="M_070203" title="重测指标,可能需要较长时间">
<onclick>opByPageObjectValue('ReStartIndexEval','midMdl','!','parent.queryFrame.query.evalProjCode','parent.queryFrame.query.evalPeriod')</onclick>
<img src="<c:out value='${root}'/>/common/main-images/reset2.gif" width="15" height="13">
</beacon:BUTTON>
<beacon:BUTTON id="button" menuID="M_070204">
<onclick>opByPageObjectValue('Delete','midMdl','!','parent.queryFrame.query.evalProjCode','parent.queryFrame.query.evalPeriod')</onclick>
<img src="<c:out value='${root}'/>/common/main-images/del.gif" width="15" height="13">
</beacon:BUTTON>
<%@ include file = "../common/page/pageInfo.jsp" %>
</td>
</tr>
</table>
<!--增删改panel End--> </td>
</tr>
<form name="list">
<tr id="background-image">
<td height="20" align="right">
<table id="table" name="export" width="99%" border="0" cellpadding="0" cellspacing="0" >
<tr id="td_background">
<c:forEach var="evalDt" items="${evalDateAndIdxGroup}" begin="0" end="0">
<td width="20%" align="left" > 开始日期:
<c:forEach var="startDt" items="${evalDt}" begin="0" end="0">
<c:out value="${startDt}"/>
</c:forEach>
</td>
<td width="30%" align="left" > 结束日期:
<c:forEach var="endDt" items="${evalDt}" begin="1" end="1">
<c:out value="${endDt}"/>
</c:forEach>
</td>
</c:forEach>
</tr>
</table>
<table id="table" name="export" width="99%" border="0" cellpadding="0" cellspacing="0" >
<tr valign="middle" id="td3_background">
<td width="5%" height="20" align="center" >选择</td>
<td width="10%" height="20" align="center" >客户编号</td>
<td width="25%" height="20" align="center" >客户名称</td>
<td width="10%" height="20" align="center" >客户业态</td>
<td width="10%" height="20" align="center" title="asdfasdfasdfasdfasdf">客户级别</td>
<c:forEach var="evalDtIdxGrp" items="${evalDateAndIdxGroup}" begin="1" end="1">
<c:forEach var="evalIdxnm" items="${evalDtIdxGrp}">
<td width="15%" height="20" align="center" ><c:out value="${evalIdxnm}"/></td>
</c:forEach>
</c:forEach>
<td height="20" align="center" >总 分</td>
</tr>
</table> </td>
</tr>
<tr>
<td align="right" valign="top" id="background-image">
<div style="overflow:auto; width:100%; height:98%;">
<table id="table" name="export" width="99%" border="0" cellspacing="1" >
<!--行的循环-->
<c:forEach var="CustIdxhash" items="${CustIndexEvalList}" varStatus="i">
<c:set var="keyParam" value="&custCode1=${CustIdxhash.CUST_CODE}${parameters}"/>
<c:set var="rName">
<c:choose>
<c:when test="${i.last && i.index == 0}">
<c:out value="${radioName}"/>
</c:when>
<c:otherwise>
<c:out value="${radioName}"/>[<c:out value="${i.index}"/>] </c:otherwise>
</c:choose>
</c:set>
<tr id="td4_font" onClick="clickRow('<c:out value='${rName}'/>')" onDblClick="dbclickRow('<c:out value='${detailSrc}'/>','<c:out value='${keyParam}'/>','<c:out value='${rName}'/>')" onMouseOver="javascript:this.className='tr_over'" onMouseOut="javascript:this.className='tr_out'">
<td width="5%" align="center" class=""><input name="r" type="radio" value="<c:out value='${keyParam}'/>"></td>
<td width="10%" align="center" class=""><c:out value="${CustIdxhash.CUST_CODE}"/> </td>
<td width="25%" class=""><c:out value="${CustIdxhash.CUST_NAME}"/> </td>
<td width="10%" align="center" class=""><c:out value="${CustIdxhash.OPER_CODE}"/> </td>
<td width="10%" align="center" class=""><c:out value="${CustIdxhash.SAL_LEVEL}"/> </td>
<c:forEach var="idxGroups" items="${CustIdxhash.IDX_GROUP_SCORE}">
<td width="15%" align="center" class=""><c:out value="${idxGroups}"/> </td>
</c:forEach>
<td class=""><c:out value="${CustIdxhash.TOTAL_SCORE}"/> </td>
</tr>
</c:forEach>
</table>
</div>
</td>
</tr>
</form>
</table>
.tblayout { table-layout:fixed; border-top: 1px solid #BACCDD; border-right: 0px none;border-bottom: 0px none;border-left: 1px solid #BACCDD; cursor: hand;} /*表格宽度固定*/
------------------------------------------------------------------------------------------
<body topmargin="0" style="overflow-x:hidden;overflow-y:hidden" onLoad="parent.loadNum = parent.loadNum + 1;">
<table width="100%" height="100%" border="0" cellpadding="0" cellspacing="0">
<tr>
<td height="20" align="right" id="background-image">
<!--增删改panel-->
<table width="99%" border="0" cellpadding="0" cellspacing="0" id="table">
<tr>
<td id="td_background">
<beacon:BUTTON id="button" menuID="M_070207">
<onclick>opByPageObjectValue('nonAlert','uid','')</onclick>
<img src="<c:out value='${root}'/>/common/main-images/add.gif" width="15" height="13">
</beacon:BUTTON>
<beacon:BUTTON id="button" menuID="M_070203" title="重测指标,可能需要较长时间">
<onclick>opByPageObjectValue('ReStartIndexEval','midMdl','!','parent.queryFrame.query.evalProjCode','parent.queryFrame.query.evalPeriod')</onclick>
<img src="<c:out value='${root}'/>/common/main-images/reset2.gif" width="15" height="13">
</beacon:BUTTON>
<beacon:BUTTON id="button" menuID="M_070204">
<onclick>opByPageObjectValue('Delete','midMdl','!','parent.queryFrame.query.evalProjCode','parent.queryFrame.query.evalPeriod')</onclick>
<img src="<c:out value='${root}'/>/common/main-images/del.gif" width="15" height="13">
</beacon:BUTTON>
<%@ include file = "../common/page/pageInfo.jsp" %>
</td>
</tr>
</table>
<!--增删改panel End--> </td>
</tr>
<form name="list">
<tr id="background-image">
<td height="20" align="right">
<table id="table" name="export" width="99%" border="0" cellpadding="0" cellspacing="0" >
<tr id="td_background">
<c:forEach var="evalDt" items="${evalDateAndIdxGroup}" begin="0" end="0">
<td width="20%" align="left" > 开始日期:
<c:forEach var="startDt" items="${evalDt}" begin="0" end="0">
<c:out value="${startDt}"/>
</c:forEach>
</td>
<td width="30%" align="left" > 结束日期:
<c:forEach var="endDt" items="${evalDt}" begin="1" end="1">
<c:out value="${endDt}"/>
</c:forEach>
</td>
</c:forEach>
</tr>
</table>
<table id="table" name="export" width="99%" border="0" cellpadding="0" cellspacing="0" >
<tr valign="middle" id="td3_background">
<td width="5%" height="20" align="center" >选择</td>
<td width="10%" height="20" align="center" >客户编号</td>
<td width="25%" height="20" align="center" >客户名称</td>
<td width="10%" height="20" align="center" >客户业态</td>
<td width="10%" height="20" align="center" title="asdfasdfasdfasdfasdf">客户级别</td>
<c:forEach var="evalDtIdxGrp" items="${evalDateAndIdxGroup}" begin="1" end="1">
<c:forEach var="evalIdxnm" items="${evalDtIdxGrp}">
<td width="15%" height="20" align="center" ><c:out value="${evalIdxnm}"/></td>
</c:forEach>
</c:forEach>
<td height="20" align="center" >总 分</td>
</tr>
</table> </td>
</tr>
<tr>
<td align="right" valign="top" id="background-image">
<div style="overflow:auto; width:100%; height:98%;">
<table id="table" name="export" width="99%" border="0" cellspacing="1" >
<!--行的循环-->
<c:forEach var="CustIdxhash" items="${CustIndexEvalList}" varStatus="i">
<c:set var="keyParam" value="&custCode1=${CustIdxhash.CUST_CODE}${parameters}"/>
<c:set var="rName">
<c:choose>
<c:when test="${i.last && i.index == 0}">
<c:out value="${radioName}"/>
</c:when>
<c:otherwise>
<c:out value="${radioName}"/>[<c:out value="${i.index}"/>] </c:otherwise>
</c:choose>
</c:set>
<tr id="td4_font" onClick="clickRow('<c:out value='${rName}'/>')" onDblClick="dbclickRow('<c:out value='${detailSrc}'/>','<c:out value='${keyParam}'/>','<c:out value='${rName}'/>')" onMouseOver="javascript:this.className='tr_over'" onMouseOut="javascript:this.className='tr_out'">
<td width="5%" align="center" class=""><input name="r" type="radio" value="<c:out value='${keyParam}'/>"></td>
<td width="10%" align="center" class=""><c:out value="${CustIdxhash.CUST_CODE}"/> </td>
<td width="25%" class=""><c:out value="${CustIdxhash.CUST_NAME}"/> </td>
<td width="10%" align="center" class=""><c:out value="${CustIdxhash.OPER_CODE}"/> </td>
<td width="10%" align="center" class=""><c:out value="${CustIdxhash.SAL_LEVEL}"/> </td>
<c:forEach var="idxGroups" items="${CustIdxhash.IDX_GROUP_SCORE}">
<td width="15%" align="center" class=""><c:out value="${idxGroups}"/> </td>
</c:forEach>
<td class=""><c:out value="${CustIdxhash.TOTAL_SCORE}"/> </td>
</tr>
</c:forEach>
</table>
</div>
</td>
</tr>
</form>
</table>