国产探花免费观看_亚洲丰满少妇自慰呻吟_97日韩有码在线_资源在线日韩欧美_一区二区精品毛片,辰东完美世界有声小说,欢乐颂第一季,yy玄幻小说排行榜完本

首頁 > 網站 > WEB開發 > 正文

表格td出現多余的右內邊留白

2024-04-27 15:16:14
字體:
來源:轉載
供稿:網友

在寫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" session().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 屬性,以指定整個文檔所使用的主要命名空間。


發表評論 共有條評論
用戶名: 密碼:
驗證碼: 匿名發表
主站蜘蛛池模板: 仁寿县| 永吉县| 长乐市| 阿尔山市| 额敏县| 金川县| 游戏| 滨州市| 定边县| 乌拉特后旗| 互助| 宣化县| 临泽县| 蓝田县| 长寿区| 佛冈县| 鄂尔多斯市| 尚志市| 马公市| 冷水江市| 龙泉市| 茂名市| 遵义县| 彰化县| 扬中市| 滨州市| 南丰县| 中宁县| 祁连县| 专栏| 临潭县| 宕昌县| 澄迈县| 浮梁县| 安徽省| 伊吾县| 宁夏| 汝州市| 聂拉木县| 五常市| 丹东市|