盼高手帮忙指点div实现table样式的问题
时间:2011-03-14
来源:互联网
我想用div实现table的样式。但是至今还差一些问题,求高手帮忙解决。
table已实现的样子:
HTML code
希望能用DIV实现上面的样子,我完成的初步DIV代码:
HTML code
希望能用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>= </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还是什么的吧。。继续坐等高手。
<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
相关阅读 更多
热门阅读
-
office 2019专业增强版最新2021版激活秘钥/序列号/激活码推荐 附激活工具
阅读:74
-
如何安装mysql8.0
阅读:31
-
Word快速设置标题样式步骤详解
阅读:28
-
20+道必知必会的Vue面试题(附答案解析)
阅读:37
-
HTML如何制作表单
阅读:22
-
百词斩可以改天数吗?当然可以,4个步骤轻松修改天数!
阅读:31
-
ET文件格式和XLS格式文件之间如何转化?
阅读:24
-
react和vue的区别及优缺点是什么
阅读:121
-
支付宝人脸识别如何关闭?
阅读:21
-
腾讯微云怎么修改照片或视频备份路径?
阅读:28