在做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>&nbsp;
            <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>&nbsp;
            <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>
             &nbsp;&nbsp;<%@ 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" >&nbsp;开始日期:
            <c:forEach var="startDt" items="${evalDt}" begin="0" end="0">
              <c:out value="${startDt}"/>
            </c:forEach>
          </td>
          <td width="30%" align="left" >&nbsp;结束日期:
            <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}"/>&nbsp;</td>
              <td width="25%" class=""><c:out value="${CustIdxhash.CUST_NAME}"/>&nbsp;</td>
              <td width="10%" align="center" class=""><c:out value="${CustIdxhash.OPER_CODE}"/>&nbsp;</td>
              <td width="10%"  align="center" class=""><c:out value="${CustIdxhash.SAL_LEVEL}"/>&nbsp;</td>
              <c:forEach var="idxGroups" items="${CustIdxhash.IDX_GROUP_SCORE}">
              <td width="15%" align="center" class=""><c:out value="${idxGroups}"/>&nbsp;</td>
              </c:forEach>
              <td class=""><c:out value="${CustIdxhash.TOTAL_SCORE}"/>&nbsp;</td>
            </tr>
          </c:forEach>
        </table>
      </div>
   </td>
  </tr>
    </form>
</table>
posted @ 2005-03-31 16:21  吹吹风----NICK  阅读(1415)  评论(0编辑  收藏  举报