首页 > 设计 > WEB开发 > 正文

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

2019-11-02 18:28:48
字体:
来源:转载
供稿:网友

在写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 属性,以指定整个文档所使用的主要命名空间。


发表评论 共有条评论
用户名: 密码:
验证码: 匿名发表