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 ...
随机推荐
- as3+java+mysql(mybatis) 数据自动工具(六)
这篇来写一些常量定义的实例.我一般在配置常量的时候,都会让 bitOffset = 20,这样是一个比较好的分配,就是每个分组可以有 0xFFFFF(1048575) 个常量,0xFFF(4095) ...
- MFC定时器使用
MFC定时器实现方法 方法一:CWnd类提供的成员函数SetTimer实现定时器功能,只能在CWnd类或其派生类中调用. 方法二:Windows API函数SetTimer来实现. MFC定时器 启动 ...
- python学习之optparse
Python 有两个内建的模块用于处理命令行参数: 一个是 getopt,<Deep in python>一书中也有提到,只能简单处理 命令行参数: 另一个是 optparse,它功能强大 ...
- uvalive 3890 Most Distant Point from the Sea
题意:求一个凸多边形中一点到边的最大距离. 思路:转换成在多边形内部,到每边距离为d的直线所围成的内多边形是否存在.也就是,二分距离+半平面交. #include<cstdio> #inc ...
- leetcode@ [329] Longest Increasing Path in a Matrix (DFS + 记忆化搜索)
https://leetcode.com/problems/longest-increasing-path-in-a-matrix/ Given an integer matrix, find the ...
- CentOS 5.6 安装Oracle Java 和 Eclipse
1.卸载原有OpenJDK 1. 使用java -version查看当前Java版本信息 2. 使用rpm -qa | grep java 列出所有被安装的java rpm package ...
- gtest框架使用
gtest文档说明: 由于公司单元测试的需要,自己花了大半天时间下载了一个gtest框架,使用了一些测试例子,总览了coderzh的玩转gtest测试框架,又看了几篇gtest博客,写下了以下内容,作 ...
- UI进阶 解析XML 解析JSON
1.数据解析 解析的基本概念 所谓“解析”:从事先规定好的格式中提取数据 解析的前提:提前约定好格式,数据提供方按照格式提供数据.数据获取方则按照格式获取数据 iOS开发常见的解析:XML解析.JSO ...
- 总结一下ERP .NET程序员必须掌握的.NET技术
总结一下ERP .NET程序员必须掌握的.NET技术,掌握了这些技术工作起来才得心应手 从毕业做.NET到现在,有好几年了,自认为只能是达到熟练的水平,谈不上精通.所以,总结一下,自己到底熟练掌握 ...
- IOS开发之类和对象
IOS开发之类和对象 OC和Java一样都是一种面向对象的语言,从今天開始我和大家一起来系统学习这样的面向对象的语言oc,欢迎大家什么问题和我一起探讨和学习. OC定义类有两个步骤:1.接口部分(通俗 ...