请选择 进入手机版 | 继续访问电脑版

HTML5中国

 找回密码
 立即注册

QQ登录

只需一步,快速开始

HTML5中国 首页 教程视频 实例代码 查看内容

分享个表格的漂亮css展示

2012-1-6 13:46| 发布者: admin | 评论: 0

摘要: 平常我们在做编辑的时候,是否遇到表格的编辑。对于普通的编辑来说,最快捷的办法就是从word里面复制到编辑器里,这样导致样式很丑,代码很乱,无法自行做调整 这里我想利用html配合简单表格样式来定义我们的表格, ...

平常我们在做编辑的时候,是否遇到表格的编辑。对于普通的编辑来说,最快捷的办法就是从word里面复制到编辑器里,这样导致样式很丑,代码很乱,无法自行做调整

这里我想利用html配合简单表格样式来定义我们的表格,让表格更加人性化,更加好看。

html 代码

<table class="mytable" cellpadding="0" cellspacing="0">
 <caption> 经营类项目验收费用决算审批表</caption>
    <tr>
     <th>项目名称</th>
        <td><input type="text"  /></td>
        <th >项目负责人</th>
        <td><input type="text"  /></td>
    </tr>
   
    <tr>
     <th>项目目标完成情况<br />完成时间</th>
        <td colspan="3"><textarea cols="55" rows="4"></textarea></td>
    </tr>
   
    <tr>
     <th>费用预算总额<br />单位:元(现金)</th>
        <td><input type="text"  /></td>
        <th>费用实际列支总额<br />(现金)</th>
        <td><input type="text"  /></td>
    </tr>
    <tr>
     <th>费用预算总额 <br />(物品)</th>
        <td><input type="text"  /></td>
        <th>费用实际列支费用总额<br />(物品)</th>
        <td><input type="text"  /></td>
    </tr>
    <tr>
     <th>内部资源预算总额</th>
        <td><input type="text"  /></td>
        <th>内部资源实际列支总额</th>
        <td><input type="text"  /></td>
    </tr>
    <tr>
     <th>项目费用,列支明细<br />(人力及开发费用)</th>
        <td colspan="3"><textarea cols="55" rows="4"></textarea></td>
    </tr>
    <tr>
     <th>项目费用,列支明细<br />(非人力成本报销明细及内部其它结算明细)</th>
        <td colspan="3"><textarea cols="55" rows="4"></textarea></td>
    </tr>
    <tr>
     <th>实际税收成本</th>
        <td colspan="3"><textarea cols="55" rows="4"></textarea></td>
    </tr>
    <tr>
     <th>实际业务提成</th>
        <td colspan="3"><textarea cols="55" rows="4"></textarea></td>
    </tr>
</table>

css代码

<style>
   table,th,td, caption{ margin:0px; padding:0px; line-height:18px; color:#000; font-size:12px;}
   .mytable th{  background:#BCE774; text-align:left; font-weight:normal; width:150px;  padding:6px;}
   .mytable caption{ background:#328AA4; color:#FFF; line-height:30px; border:1px solid #FFF;}
   .mytable td{background:#ECFBD4; padding:3px;  }
   .mytable th,.mytable td{border-top:1px solid #FFF;border-left:1px solid #FFF; }
   .mytable{border-bottom:1px solid #FFF;border-right:1px solid #FFF;}
</style>

更多
2

鲜花

握手

雷人
1

路过

鸡蛋

刚表态过的朋友 (3 人)

相关阅读

最新评论

验证问答 换一个



HTML5中国微信

无觅相关文章插件

关于我们|HTML5论坛|友情链接|手机版|

Copyright @HTML5中国 All Right Reserved. Powered by Discuz! X2.

京ICP备11006447号-7 京公网安备:110105011387 京公网安备:11010802010583号

回顶部