java 动态增加不规则表格_样式表打造不规则表格

需求一个不规则表格，table局限性太大，用样式表来画出来。每个行和列宽度高度都可以控制，十分方便。

源码：

* {

margin: 0px 0px 0px 0px;

padding: 0px 0px 0px 0px;

list-style:none;

font-family:宋体;

font-size:12px;

}

#main{

margin-left:15%;

margin-top:40px;

width:70%;

}

#main ul{

margin-left:1px;

margin-top:1px;

width:100%;

height:100%;

}

#main ul li{

float:left;

height:23px;

border:1px solid #cfdae8;

margin-left:-1px;

margin-top:-1px;

text-align:center;

}

#main ul li.title11{width:9%; height:90px; line-height:90px }

#main ul li.title12{width:40%; height:90px; line-height:90px}

#main ul li.title13{width:10%; height:90px; line-height:90px}

#main ul li.title14{width:40%; height:90px; line-height:90px}

#main ul li.title21{width:9%; height:30px; line-height:30px }

#main ul li.title22{width:40%; height:30px; line-height:30px}

#main ul li.title23{width:15%; height:30px; line-height:30px}

#main ul li.title24{width:35%; height:30px; line-height:30px}

#main ul li.title31{width:60%; height:30px; line-height:30px}

#main ul li.title32{width:19%; height:30px; line-height:30px}

#main ul li.title33{width:20%; height:30px; line-height:30px}

#main ul li.title41{width:60%; height:90px; line-height:30px}

#main ul li.title42{width:19%; height:90px; line-height:30px}

#main ul li.title43{width:20%; height:90px; line-height:30px}

#main ul li.title51{width:99.2%; height:30px; text-align:left; line-height:30px}

#main ul li.title61{width:40%; height:90px; line-height:90px}

#main ul li.title62{width:30%; height:90px; line-height:90px}

#main ul li.title63{width:29.1%; height:90px; line-height:90px}

• 防伪码
• 密码区
• 付款方
• 收款方
• 项目
• 金额
• 备注
• 合计金额
• 1212

效果如图：

要点：

line-height:90px。行高指的是文本行的基线间的距离

每行宽度的合不能大于 100%，否则会分行。

posted on 2009-07-30 17:47 super_nini 阅读(1179) 评论(0)  编辑  收藏