利用CSS生成精美细线Table表格

精美的表格是前端开发用到的一个组件,很多时候我们利用复杂的页面style代码,来生成这样的表格,造成了页面的修改性和可读性都非常差。这里推荐直接使用css来产生一个细线表格,如下图:
[img]http://www.kutoku.info/images/java/100810/css01.png[/img]
使用方法也很简单:
第一:导入table.css
[code]<link rel="stylesheet" type="text/css" href="./css/table.css"/>[/code]
第二:套用格式
[code]<table class="table">[/code]
[b]您只需要给table设置样式class="table"即可[/b],不需要对任何的tr,td做操作。您也可以写成<table class="table" style="width:600px"> style="width:600px"是为了更灵活的控制表格的宽度,如果直接写到table.css里自然也没有问题;如果您打算让td有有背景颜色,只需要设置td的样式class="color"即可。当然其实可以在css里面利用表达式直接设置成隔行变色,不过那样做会降低页面的效率,不推荐在css中使用表达式。

如果大家想对样式进行微调,只需要调整table.css即可,不需要改任何的页面html代码。如果大家想修改边框的颜色,请在table.css中找到色值:#ADD8E6,然后全部替换成自己想要的色值即可。附件是一个具体的例子。

table.css源码:
[code]
/*表格样式。*/
.table {
width:100%;
padding: 0px;
margin: 0px;
font-family:Arial, Tahoma, Verdana, Sans-Serif,宋体;
border-left:1px solid #ADD8E6;
border-collapse:collapse;
}

/*表头样式。*/
.table th {
font-size:12px;
font-weight:600;
color: #303030;
border-right: 1px solid #ADD8E6;
border-bottom: 1px solid #ADD8E6;
border-top: 1px solid #ADD8E6;
letter-spacing: 2px;
text-align: left;
padding: 10px 0px 10px 0px;
background: url(../images/tablehdbg.png);
white-space:nowrap;
text-align:center;
overflow: hidden;
}

/*单元格样式。*/
.table td {
border-right: 1px solid #ADD8E6;
border-bottom: 1px solid #ADD8E6;
background: #fff;
font-size:12px;
padding: 3px 3px 3px 6px;
color: #303030;
word-break:break-all;
word-wrap:break-word;
white-space:normal;
}

/*蓝色单元格样式,主要用于隔行变色。*/
.table td.color{
background:#edf7f9;
}

/*表格中超级链接样式。*/
.table td a:link{
font-weight:400 ;
color:#2259D7 ;
text-decoration:none ;
word-break:break-all;
word-wrap:break-word;
white-space:normal;
}

.table td a:visited {
font-weight:400 ;
color:#2259D7 ;
text-decoration:none ;
word-break:break-all;
word-wrap:break-word;
white-space:normal;
}

.table td a:hover {
font-weight:400 ;
text-decoration:underline ;
color: #303030;
word-break:break-all;
word-wrap:break-word;
white-space:normal;
}

.table td a:active {
font-weight:400 ;
text-decoration:none ;
color:#2259D7 ;
word-break:break-all;
word-wrap:break-word;
white-space:normal;
}
[/code]

文章地址:[url]http://javapub.iteye.com/blog/733910[/url]
  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
**数字乡村解决方案摘要** **国家战略与乡村振兴** 中国正实施国家大数据战略,以加快数字中国的建设,整合数据资源,保障数据安全,并推动产业升级。2023年中央一号文件强调了乡村振兴战略,旨在通过产业兴旺、生态宜居、乡风文明、治理有效和生活富裕五大方面,实现农业农村现代化。 **数字乡村建设的重要性** 数字乡村建设是乡村振兴战略的重要组成部分,通过整合资源数据,推动物联网和遥感技术在农业中的应用,促进农业现代化。它被视为促进乡村转型发展的新方向,是数字化在农业农村经济社会发展中的应用。 **关键要素与效益** 数字乡村建设的关键要素包括数据资源整合、产业促进、农业发展规模化和标准化,以及改善乡村生活服务体系。预期效益包括提升国家治理能力,实现政府决策科学化和社会治理精准化,同时推动公共服务高效化。 **体系架构与数据融合** 数字乡村的体系架构包括乡村生态、基层治理、慧治、慧享、慧融、慧美、慧智和慧图等多个方面,实现城乡、政企、农户各级平台及服务的融合。数据融合是核心,整合乡村人口、产值、环境监测等多方面数据,为乡村治理和产业发展提供支撑。 **多业务协同与智慧治理** 数字乡村通过多业务协同应用平台,实现乡村物联网的布局和触达,涵盖农业生产、农资厂商、消费者等环节。区块链技术在农产品质量溯源中的应用,确保了产品全过程可追溯。乡村智慧治理通过村务管理、财务管理等方面提升治理效能,实现绿色发展理念。综合服务体系通过“互联网+服务”模式,提供便民服务和乡村经济发展支持,推动乡村全面振兴。

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值