首页 诗词 字典 板报 句子 名言 友答 励志 学校 网站地图
当前位置: 首页 > 教程频道 > 网站开发 > CSS >

DIV中的表格不能对齐,

2012-09-10 
DIV中的表格不能对齐,求助。。。。p /pstyle typetext/csstd {font-size: 9pt}.title {font-size: 10

DIV中的表格不能对齐,求助。。。。
<p>&nbsp;
</p>
<style type="text/css">
td { font-size: 9pt}
.title { font-size: 10.5pt}
.iwhite {
border-left: 1px solid rgb(255,255,255);
 border-right: 1px solid rgb(255,255,255); 
border-top: 1px solid rgb(255,255,255);
border-bottom:1px solid rgb(0.0,255); 
font-family: "Verdana", "Arial", "Helvetica", "sans-serif"; 
font-size: 9pt; color: #298583;background:#ffffff; font-weight: normal}
.igray {font-family: "宋体";
font-size: 9pt;
color: #000000;
background:#ffffff;
font-weight: normal;
border-bottom: 0px solid #D7E0EC;
border-top: 0px solid #DADBE3;
border-right: 0px solid #DADBE3;
border-left: 0px solid #DADBE3;
}
.igrby {font-family: "宋体";
font-size: 9pt;
color: #000000;
background:#ffffff;
font-weight: normal;
border-bottom: 0px solid #D7E0EC;
border-top: 0px solid #DADBE3;
border-right: 0px solid #DADBE3;
border-left: 0px solid #DADBE3;
}

.tabborder {
  border:1px solid #ffffff;
}
.writetd {
  text-align:left;
padding:6px;

}
ul {width:100%;height:100%;} 
li {float:left; height:63px;text-align:center;line-height:62px;} 
li.b {border-bottom:1px solid #000;width:18%;border-right:1px solid #000; float:left } 
li.zhongjian {border-bottom:1px solid #000; width:62%; border-right:1px solid #000; }
li.you {
border-bottom:1px solid #000;
width:20%;

  </style>
<table border="0" cellpadding="0" cellspacing="0" style="border-right-width: 0px; border-top-width: 0px; border-bottom-width: 0px; border-left-width: 0px" width="100%">
<tbody>
<tr>
<td align="middle" height="42" style="border-right-width: 0px; border-top-width: 0px; border-bottom-width: 0px; border-left-width: 0px">
<font size="+1"><strong>员工离职审批单</strong></font></td>
</tr>
</tbody>
</table>
<table align="center" border="1" bordercolor="#666666" cellpadding="0" cellspacing="0" style="border-collapse: collapse" width="95%">
<tbody>
<tr>
<td bgcolor="#ffffff" colspan="2" style="text-align: center">
公文标题</td>
<td bgcolor="#ffffff" class="writetd" colspan="6">
<input name="文件标题" size="40" /><span style="color: #8b4513">(例:生产部张三的离职申请)</span></td>
</tr>
<tr>
<td class="writetd" style="text-align: center">
姓名</td>
<td class="writetd">
&nbsp;<input id="3698" name="姓名" size="10" style="width: 70px; height: 18px" /></td>
<td class="writetd" style="text-align: center">
部门</td>
<td class="writetd">
&nbsp;<input id="3699" name="部门" size="10" style="width: 70px; height: 18px" /></td>
<td class="writetd" style="text-align: center">
入职日期</td>
<td class="writetd">
&nbsp;<input id="3700" name="入职日期" size="10" style="width: 70px; height: 18px" /></td>
<td class="writetd" style="text-align: center">
交接日期</td>
<td class="writetd">
&nbsp;<input id="3701" name="交接日期" size="10" style="width: 70px; height: 18px" /></td>


</tr>
<tr>
<td class="writetd" style="text-align: center">
类型</td>
<td class="writetd">
<input id="3697" name="离职类型" size="10" style="width: 70px; height: 18px" /></td>
<td class="writetd" style="text-align: center">
职务</td>
<td class="writetd" style="text-align: justify">
&nbsp;<input id="3704" name="职务" size="10" style="width: 70px; height: 18px" /></td>
<td class="writetd" style="text-align: center">
交接人</td>
<td class="writetd">
&nbsp;<input id="3703" name="交接人" size="10" style="width: 70px; height: 18px" /></td>
<td style="text-align: center">
离职日期</td>
<td class="writetd">
&nbsp;<input id="3702" name="离职日期" size="10" style="width: 70px; height: 18px" /></td>
</tr>
<tr>
<td bgcolor="#ffffff" colspan="2" style="text-align: center" width="20%">
离职原因</td>
<td bgcolor="#ffffff" class="writetd" colspan="6" width="80%">
<textarea cols="60" id="3705" name="离职原因" rows="3"></textarea></td>
</tr>
  <tr>
<td colspan="8">
<div id="a1">  
<ul>  
<li class="b">生活更美好1</li>  
<li class="zhongjian"><input readOnly type="text" class="igray" id="3998" name="fieldstr6" value=""></li>  
<li class="you">&nbsp;<input readOnly type="text" class="igray" id="3999" name="fieldstr7" value=""></li>  
</ul>  
</div>

<div id="a2">  
<ul>  
<li class="b">生活更美好2</li>  
<li class="zhongjian"><textarea readOnly cols="60" id="4381" name="longstr3" rows="3"></textarea readOnly></li>  
<li class="you">&nbsp;</li>  
</ul>  
</div>  

<div id="a3">  
<ul>  
<li class="b">生活更美好3</li>  
<li class="zhongjian"><textarea readOnly cols="60" id="4381" name="longstr3" rows="3"></textarea readOnly></li>  
<li class="you">&nbsp;<input readOnly type="text" class="igray" id="3999" name="fieldstr7" value=""></li>  
</ul>  
</div>
<div style="clear:both"></div>
<div id="a4">  
<ul>  
<li class="b">生活更美好4</li>  
<li class="zhongjian"><textarea readOnly cols="60" id="4381" name="longstr3" rows="3"></textarea readOnly></li>  
<li class="you">&nbsp;<span></span></li>  
</ul>  
</div>  
<div style="clear:both"></div>
<div id="a5">  
<ul>  
<li class="b">生活更美好5</li>  
<li class="zhongjian"><textarea readOnly cols="60" id="4381" name="longstr3" rows="3"></textarea readOnly></li>  


<li class="you">&nbsp;
<input readOnly type="text" class="igray" id="3999" name="fieldstr7" value=""></li>  
</ul>  
</div>
<div style="clear:both"></div>

<script type="text/javascript">
window.onload=function(){
var a=document.getElementsByTagName("div");
for(i=0;i<a.length;i++)
{
var b=a[i].getElementsByTagName("textarea");
if(b.length==0)
{
a[i].style.display='none';
}
}
}
</script></td>
</tr>
<tr>
<td class="writetd" colspan="4" style="text-align: center">
制单人:<input name="提交人" /></td>
<td class="writetd" colspan="4" style="text-align: center">
制单日期:<input name="提交日期" /></td>
</tr>
<tr>
<td class="writetd" colspan="8">
1、人力资源部每月18日、30日办理员工离职手续相关事宜,其他时间不予办理。<br />
2、员工完成工作交接并完成本人离职手续后方可离职。<br />
3、交接单一式三份,人力资源部、移交人及交接人各一份。</td>
</tr>
</tbody>
</table>


[解决办法]
将 li.you 中的 width:20% 去掉 让其自适应 因为换行的原因是 li.b 20% li.zhongjian 60% li.you 20% 看起来是100%了 但是你忘记了你还设置了border的宽度 1px 所以实际上已经超出了td的100% 所以后面的换行了
你可以看你的修改后的代码 很明显有个地方线突出了 突出的距离大概是2个或4个线的宽度 自己好好琢磨琢磨去调整

热点排行