表格td出现多余的右内边留白

在写jsp页面的过程中,使用了样式:

.details{width:100%;margin-top:10px;border:1px solid #99bbe8;}
.details td{ border:1px solid #99bbe8; padding:3px 4px; font-size:13px; }
.details .n{ background-color:#e1edf9; width:100; text-align:right; font-size:12px; color:#000000; }

页面的内容为:

<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
<%@ taglib uri="/WEB-INF/struts-bean.tld" prefix="bean"%>
<%@ taglib uri="/WEB-INF/struts-html.tld" prefix="html"%>
<%@ taglib uri="http://java.sun.com/jstl/core_rt" prefix="c"%>
<%@ taglib uri="http://java.sun.com/jstl/fmt_rt" prefix="fmt"%>
<%@ taglib uri="/WEB-INF/struts-logic.tld" prefix="logic"%>
<%@ page import="com.fsti.constants.*"%>
<%@ page import="com.fsti.util.constant.GlobalConstant"%>
<%@ page import="com.fsti.model.*"%>
<%@ page import="com.fsti.util.cache.*"%>
<%@ page import="com.fsti.util.helper.StringUtil"%>
<%@ page import="java.util.Map"%>
<%@ page import="com.fsti.rbac.module.Role"%>
<% String basePath = request.getScheme() + "://" + request.getServerName() + ":" + request.getServerPort() + request.getContextPath(); TCertificate item = (TCertificate)request.getAttribute("item"); User loginUser = (User)request.getSession().getAttribute(GlobalConstant.LOGINUSER.LOGINUSER); String roleType = ((Role) (loginUser.getRoles().toArray())[0]).getRole_type(); String dep = loginUser.getDepartment(); %>

<html xmlns="http://www.w3.org/1999/xhtml">
<html:base />
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>证书借用申请(单本)</title>
<link rel="stylesheet" type="text/css" href="<%=basePath%>/commons/css/common.css" />
<link rel="stylesheet" type="text/css" href="<%=basePath %>/commons/css/busTicket.css" />
<script type="text/javascript" src="<%=basePath%>/commons/js/jquery.js"></script>
<script language="javascript" type="text/javascript" src="<%=basePath%>/commons/datepicker/WdatePicker.js" defer="defer"></script>
<link rel="stylesheet" type="text/css" href="<%=basePath%>/commons/datepicker/skin/WdatePicker.css" />

<script type="text/javascript"> //保存 function toApply() { if(validParams()){ if(confirm("确定执行该操作吗?")) { document.getElementById('form1').submit(); } } } //验证数据有效性 function validParams(){ if($("#borDepartment").val()=="" || $("#borrower").val()=="" || $("#borPurpose").val()=="" || $("#borDemand").val()=="" || $("#expRevertDate").val()=="") { alert("请将信息填写完整!"); return false; } return true; } $(function(){ $("#borDepartment").val("<%=dep%>"); }); </script>
</head>
<body>
    <form name="form1" id="form1" method="post" action="<%=basePath%>/contract/certificateAction.do?method=cerBorOne">
        <div class="container">
            <div>
                <span class="t2">证书借用申请</span> <span style="margin-left: 10px">
                <input type="button" value="保存" class="inputBg9" id="applyButton" onclick="toApply();" ; />
                <input type="button" value="返回" class="inputBg9" onclick="history.go(-1);" ; />
                <input type="hidden" name="certificateId" id="certificateId" value="${item.certificateId}"/>
                </span>
            </div>
            <span style="margin-top: 10px; display: block">证书信息:</font></span>

            <table class='details' style="margin-top: 2px">
               <tr>
                   <td class='n' width="19%" align="right">证书名称:</td>
                   <td width="31%">
                       <c:if test="${not empty item.cName}">${item.cName}</c:if>
                   </td>
                   <td class='n' width="19%" align="right">证书类型:</td>
                   <td width="31%">
                       <c:if test="${not empty item.cType}">${item.cType}</c:if>
                   </td>
               </tr>
               <tr>
                   <td class='n' width="19%" align="right">管理部门:</td>
                   <td width="31%">
                       <c:if test="${not empty item.department}">${item.department}</c:if>
                   </td>
                   <td class='n' width="19%" align="right">归属权:</td>
                   <td width="31%">
                       <c:if test="${not empty item.attribution}">${item.attribution}</c:if>
                   </td>
               </tr>
            </table>

            <span style="margin-top: 10px; display: block">借用部门填写:</font></span>
            <table class='details' style="margin-top: 2px" id="zyAdd">
                <tr>
                    <td class='n' width="19%" align="right">借用部门:</td>
                    <td width="31%">
                        <select name="borDepartment" id="borDepartment" >
                                    <option value="">--请选择--</option>
                                    <option value="保密部">保密部</option>
                                    <option value="管理部门">管理部门</option>
                                    <option value="综合管理部">综合管理部</option>

            </select>
                    </td>
                    <td class='n' width="19%">借用人:</td>
                    <td width="31%">
                        <input type="text" name="borrower" id="borrower" >
                    </td>
                </tr>
                <tr>
                    <td class='n' width="19%">借用目的:</td>
                    <td width="31%">
                        <input type="text" name="borPurpose" id="borPurpose">
                    </td>
                    <td class='n' width="19%">借用需求:</td>
                    <td width="31%">
                        <select name="borDemand" id="borDemand">、、
                            <option value="" >---请选择---</option>
                            <option value="查阅">查阅</option>
                            <option value="复印" >复印</option>
                            <option value="借出原件" >借出原件</option>
                        </select>
                    </td>
                </tr>
                <tr>
                    <td class='n'>归还日期:</td>
                    <td>
                        <input type="text" name="expRevertDate" id="expRevertDate" style="width: 80px;" class="Wdate" onfocus="WdatePicker({isShowClear:true,readOnly:true})"/>
                    </td>
                    <td class='n'>借用申请时间:</td>
                    <td>

                    </td>
                </tr>
             </table>      
        </div>
    </form>
</body>
</html>

但是,在浏览器中显示时,在class=’n’的单元格内,出现了多余的右内边留白,如下图:

检查了很长时间,最后发现,问题出在:在<html>标签之前,漏加了:<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

也就是,在<html xmlns="http://www.w3.org/1999/xhtml">
标签前面加上
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
即可。
呈现出的正确的页面效果为:

简单来说,
<!DOCTYPE> 声明位于文档中的最前面的位置,处于<html>标签之前。用于告知浏览器文档使用哪种 HTML 或 XHTML 规范。
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
声明了文档的根元素是 html,它在公共标识符被定义为 “-//W3C//DTD XHTML 1.0 Transitional//EN” 的 DTD 中进行了定义。浏览器将明白如何寻找匹配此公共标识符的 DTD。如果找不到,浏览器将使用公共标识符后面的 URL 作为寻找 DTD 的位置。

<html xmlns="http://www.w3.org/1999/xhtml"> ,是在文档中的 标签中使用 xmlns 属性,以指定整个文档所使用的主要命名空间。

相关文章
相关标签/搜索