+ -
当前位置:首页 → 问答吧 → 盼高手帮忙指点div实现table样式的问题

盼高手帮忙指点div实现table样式的问题

时间:2011-03-14

来源:互联网

我想用div实现table的样式。但是至今还差一些问题,求高手帮忙解决。

table已实现的样子:
HTML code
<TABLE style="PADDING-LEFT: 20px;width:770px;">
<TBODY>
<TR>
<TD rowSpan=2>出生体重751-1000克的新生儿患者住院死亡率</TD>
<TD rowSpan=2><INPUT maxLength=10 name=P118></TD>
<TD rowSpan=2>=&nbsp;</TD>
<TD style="BORDER-BOTTOM: #333333 1px solid">
<TABLE>
<TBODY>
<TR>
<TD>出生体重751-1000克的新生儿患者住院死亡人数</TD>
<TD><INPUT maxLength=10 name=P116></TD></TR></TBODY></TABLE></TD>
<TD rowSpan=2>×100%</TD></TR>
<TR>
<TD>
<TABLE>
<TBODY>
<TR>
<TD>同期出生体重751-1000克的新生儿患者出院人次</TD>
<TD><INPUT maxLength=10 name=P117></TD></TR></TBODY></TABLE></TD></TR></TBODY></TABLE>


希望能用DIV实现上面的样子,我完成的初步DIV代码:
HTML code
<div class="table" style="width:770px;height:80px;">
<div class="left" style="float:left;width:280px;height:80px;">
<div style="float:left;width:180px;height:80px;">出生体重751-1000克的新生儿患者住院死亡率</div>
<div style="float:left;width:100px;height:80px;"><input name=P103 width="80px" /></div>
</div>
<div class="center" style="float:left;width:20px;height:80px;">
=
</div>
<div class="right" style="float:left;width:470px;height:80px;">
<div style="float:left;width:400px;height:80px;">
<div style="border-bottom:solid 1px;">出生体重751-1000克的新生儿患者住院死亡人数<input name=P101 width="80px" /></div>
<div>同期出生体重751-1000克的新生儿患者出院人次<input name=P102 width="80px" /></div>
</div>
<div class="percent" style="float:left;width:70px;height:80px;">×100%</div>
</div>
</div>


希望能用div实现上面table的样子,求高手指点!谢谢。

作者: gllmyth   发布时间: 2011-03-14

<div class="table" style="width:770px;height:80px;">
<div class="left" style="float:left;width:280px;height:80px;">
<div style="float:left;width:180px;height:80px; text-align:center;">出生体重751-1000克的新生儿患者住院死亡率</div>
<div style="float:left;width:100px;height:80px;"><input name=P103 width="80px" style="margin-top:30px;"/></div>
</div>
<div class="center" style="float:left;width:20px;height:80px; line-height:80px; text-align:center">
=
</div>
<div class="right" style="float:left;width:470px;height:80px;">
<div style="float:left;width:400px;height:80px;">
<div style="border-bottom:solid 1px #000; height:1%"><span style="width:48%; float:left">出生体重751-1000克的新生儿患者住院死亡人数</span><input name=P101 width="80px" style="float:right"/>
<div style="clear:both"></div>
</div>

<div style="clear:both"><span style="width:48%; float:left">同期出生体重751-1000克的新生儿患者出院人次</span><input name=P102 width="80px" style="float:right" /></div>

</div>
<div class="percent" style="float:left;width:70px;height:80px; line-height:80px; text-align:center">×100%</div>
</div>
</div>


我也只是新手。只是当练习的自己修改了下。应该。还达不到你的要求的吧、呵呵

 - -/~!垂直居中貌似很麻烦。。如果是固定高度的话。。可以用padding还是什么的吧。。继续坐等高手。

作者: leo_xiaoxiaojun   发布时间: 2011-03-14