table的border-collapse属性与border-spacing属性
table
border-collapse:collapse; 表示边框合并在一起。
border-collapse:separate;表示边框之间的间距，间距的大小用border-spacing:px;定义大小。
CSS:
* { margin:0; padding:0;}
table { border-collapse:separate; border-spacing:20px; width:600px; line-height:22px; font-size:12px;}
tr,td { border:1px solid #999;}
td { padding:1px 2px;}
.one { font-weight:bolder; color:red;}
.title { width:140px;}
.title2 { width:350px;}
.title3 { width:90px;}
HTMl:
<table>
<tbody>
<tr class="one">
<td class="title">礼品名称</td>
<td class="title2">兑换规则</td>
<td class="title3">是否限量</td>
</tr>
<tr>
<td>QQ秀装扮、QQ空间装扮</td>
<td>活动期间每个QQ限量领取，QQ秀、QQ空间装扮有效期7天</td>
<td>限量</td>
</tr>
<tr>
<td>红钻一个月</td>
<td rowspan="2">每天限领1个，活动期间最多兑换20次</td>
<td>不限</td>
</tr>
<tr>
<td>捕鱼假日、QQ炫舞、王朝霸域、战龙三国、寻侠、蜀山传、QQ部落等礼包</td>
<td>限量</td>
</tr>
<tr>
<td>红钻一个月</td>
<td rowspan="3">每天限领1个，活动期间最多兑换10次</td>
<td>不限</td>
</tr>
<tr>
<td>QQ秀手机壳</td>
<td>限量</td>
</tr>
<tr>
<td>蛇年QQ</td>
<td>限量</td>
</tr>
<tr>
<td>Ipad</td>
<td>活动期间限领取1次</td>
<td>限量</td>
</tr>
</tbody>
</table>
效果图：
当
CSS:
* { margin:0; padding:0;}
table { border-collapse:collapse; width:600px; line-height:22px; font-size:12px;}
tr,td { border:1px solid #999;}
td { padding:1px 2px;}
.one { font-weight:bolder; color:red;}
.title { width:140px;}
.title2 { width:350px;}
.title3 { width:90px;}
效果图：
最新文章
- Linux常用指令指南，终端装逼利器
- iOS开发系列文章（持续更新……）
- python property理解
- eclipse提交项目到github
- PhpExcel笔记,phpExcel中文帮助手册
- 常见面试问题 - Useful Links
- spark spark ziliao important
- HashSet<T>类
- 关于no system images installed for this target解决方法
- C#Dictionary 实例
- Delphi 的接口机制——接口操作的编译器实现过程(1)
- 子查询 此处该用AND 而不是 WHERE
- 什么是JDBC？
- 浅谈web应用的负载均衡、集群、高可用(HA)解决方案（转）
- CSS3总结（干货）
- 【转载】tomcat+nginx+redis实现均衡负载、session共享(一)
- ABP拦截器之AuthorizationInterceptor
- Python入门-用户登录程序升级版
- bzoj千题计划321：bzoj5251: [2018多省省队联测]劈配（网络流 + 二分）
- 无实体反序列化Json