table tr分离并加圆角和阴影
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title></title>
<script src="jquery.js" type="text/javascript"></script>
<style type="text/css">
table{
border-collapse:separate;
border-spacing:0 20px;}
td{ box-shadow:/*-5px 0 5px rgba(0,0,0,.3),-5px 0 10px rgba(255,255,255,.3),/*左部*/
0 -5px 5px rgba(0,0,0,.3),0 -5px 10px rgba(255,255,255,.3),/*顶部*/
/*5px 0 5px rgba(0,0,0,.3),5px 0 10px rgba(255,255,255,.3),/*右部*/
0 5px 5px rgba(0,0,0,.3),0 5px 10px rgba(255,255,255,.3)/*底部*/}
td{
border:1px solid #F00;
border-left:0;}
</style>
<script>
$(function() {
var tr = $('table tr');
$(tr).children('td:first-child').css({
'box-shadow' : '0 -5px 5px rgba(0,0,0,.3),0 -5px 10px rgba(255,255,255,.3),-5px 0 5px rgba(0,0,0,.3),-5px 0 10px rgba(255,255,255,.3),0 5px 5px rgba(0,0,0,.3),0 5px 10px rgba(255,255,255,.3)',
'border' : '1px solid #F00',
'border-radius' : '5px 0 0 5px'
});
$(tr).children('td:last-child').css({
'box-shadow' : '0 -5px 5px rgba(0,0,0,.3),0 -5px 10px rgba(255,255,255,.3),5px 0 5px rgba(0,0,0,.3),5px 0 10px rgba(255,255,255,.3),0 5px 5px rgba(0,0,0,.3),0 5px 10px rgba(255,255,255,.3)',
'border-radius' : '0 5px 5px 0'
});
});
</script>
</head> <body>
<table width="600" border="0" cellpadding="0" cellspacing="0">
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
<td>4</td>
</tr>
<tr>
<td>5</td>
<td>6</td>
<td>7</td>
<td>8</td>
</tr>
<tr>
<td>9</td>
<td>10</td>
<td>11</td>
<td>12</td>
</tr>
</table> </body>
</html>
table tr分离并加圆角和阴影的更多相关文章
- html 的table tr td的使用
cellspacing 属性规定单元格之间的空间. cellpadding 属性规定单元边沿与其内容之间的空白. border 简写属性在一个声明设置所有的边框属性. border 用在table属性 ...
- CSS3学习之圆角box-shadow,阴影border-radius
最近经常玩腾讯微博,出来职业习惯,看看它的CSS,里面运用了大量的css3的东东,有一处用到了Data URI,还有css expression有争议的地方,对png24图片的处理也是用滤镜,类似( ...
- Flutter之Decoration（边框、圆角、阴影、形状、渐变、背景图像等）
1 继续关系: BoxDecoration:实现边框.圆角.阴影.形状.渐变.背景图像 ShapeDecoration:实现四个边分别指定颜色和宽度.底部线.矩形边色.圆形边色.体育场(竖向椭圆). ...
- 转：Flutter Decoration背景设定（边框、圆角、阴影、形状、渐变、背景图像等）
1 继续关系: BoxDecoration:实现边框.圆角.阴影.形状.渐变.背景图像 ShapeDecoration:实现四个边分别指定颜色和宽度.底部线.矩形边色.圆形边色.体育场(竖向椭圆). ...
- html中table,tr,td
table表格,tr表格中的行,tr表格中的列,等级关系是table>tr>td, 当然表格中还包括thead,tbody,tfoot,th,但由于浏览器支持缘故很少使用.另外table在 ...
- LODOP中table自动分页补线加border
LODOP中可以用ADD_PRINT_TABLE.ADD_PRINT_HTM.ADD_PRINT_HTML.ADD_PRINT_TBURL等可以输出超文本的表格,超文有超过打印项高度或纸张高度自动分页 ...
- jQuery操作Table tr td常用的方法
虽然现在DIV+CSS进行页的布局大行其道,但是很多地方使用table还是有很多优势,用table展示数据是比较方便的,下面汇总了jQuery操作Table tr td常用的方法,熟记这些操作技巧,下 ...
- 汇总常用的jQuery操作Table tr td方法
虽然现在DIV+CSS进行页的布局大行其道,但是很多地方使用table还是有很多优势,用table展示数据是比较方便的,下面汇总了jQuery操作Table tr td常用的方法,熟记这些操作技巧,下 ...
- css中table tr:nth-child(even)改变tr背景颜色： IE7,8无效
例如: .my_table tr:nth-child(even){ background:#E6EDF5; } .my_table tr:nth-child(odd){ background:#F0F ...
随机推荐
- linu、C语言、计算机基础教程
Linux操作系统入门教程:http://see.xidian.edu.cn/cpp/linux/ 鸟哥的linux私房菜:http://vbird.dic.ksu.edu.tw/ 计算机操作系统教程 ...
- FOR 循环 索引从n 开始
RF 中FOR 循环默认是从0开始,如果想从任意n开始如下所示: 方法一: 结果,如你所愿输出1-6: 方法二,利用FOR遍历list来实现: 结果: 这里注意是输出1-9而不是1-10
- Loadrunner通过sitescope监控mysql
1. Loadrunner通过sitescope监控mysql 1.1. Sitescope下载 第一次在网上下载的是sitescope11.30,安装之后无法破解,所以最后卸载了,重新下载了si ...
- 3.1 全局存储带宽与合并访问 -- Global Memory(DRAM) bandwidth and memory coalesce
全局存储带宽(DRAM) 全局内存是动态随机访问的方式访问内存．我们希望访问DRAM的时候非常快,实际情况是DRAM中出来的数据非常非常慢,这就好比,理想状态是泄洪,水倾巢而出,气势宏伟,实际取水却像 ...
- 50道经典的JAVA编程题(21-25)
50道经典的JAVA编程题(21-25),明天早上java考试了,还是坚持做题吧...这题比老师的题好多了! [程序21]TestJieCheng.java题目:求1+2!+3!+...+20!的和1 ...
- leetcode@ [322] Coin Change (Dynamic Programming)
https://leetcode.com/problems/coin-change/ You are given coins of different denominations and a tota ...
- Oracle-PLSQL Developer使用笔记
1.新建菜单 command window ---->命令行,执行sql语句 sql window ---->执行sql语句,可导出CSV,TSV,HTML,XML等类型文件 report ...
- 偶遇mysql外键不好使
原来是创建表时选择的类型不一样,应该是innoDB,而且关联的主表类型也必须是innoDB
- ios键盘上添加辅助视图
- C#学习笔记——面向对象、面向组件以及类型基础
C#学习笔记——面向对象.面向组件以及类型基础 目录 一 面向对象与面向组件 二 基元类型与 new 操作 三 值类型与引用类型 四 类型转换 五 相等性与同一性 六 对象哈希码 一 面向对象与面向组 ...