<!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分离并加圆角和阴影的更多相关文章

  1. html 的table tr td的使用

    cellspacing 属性规定单元格之间的空间. cellpadding 属性规定单元边沿与其内容之间的空白. border 简写属性在一个声明设置所有的边框属性. border 用在table属性 ...

  2. CSS3学习之圆角box-shadow,阴影border-radius

    最近经常玩腾讯微博,出来职业习惯,看看它的CSS,里面运用了大量的css3的东东,有一处用到了Data URI,还有css e­xpression有争议的地方,对png24图片的处理也是用滤镜,类似( ...

  3. Flutter之Decoration（边框、圆角、阴影、形状、渐变、背景图像等）

    1 继续关系: BoxDecoration:实现边框.圆角.阴影.形状.渐变.背景图像 ShapeDecoration:实现四个边分别指定颜色和宽度.底部线.矩形边色.圆形边色.体育场(竖向椭圆).  ...

  4. 转：Flutter Decoration背景设定（边框、圆角、阴影、形状、渐变、背景图像等）

    1 继续关系: BoxDecoration:实现边框.圆角.阴影.形状.渐变.背景图像 ShapeDecoration:实现四个边分别指定颜色和宽度.底部线.矩形边色.圆形边色.体育场(竖向椭圆).  ...

  5. html中table,tr,td

    table表格,tr表格中的行,tr表格中的列,等级关系是table>tr>td, 当然表格中还包括thead,tbody,tfoot,th,但由于浏览器支持缘故很少使用.另外table在 ...

  6. LODOP中table自动分页补线加border

    LODOP中可以用ADD_PRINT_TABLE.ADD_PRINT_HTM.ADD_PRINT_HTML.ADD_PRINT_TBURL等可以输出超文本的表格,超文有超过打印项高度或纸张高度自动分页 ...

  7. jQuery操作Table tr td常用的方法

    虽然现在DIV+CSS进行页的布局大行其道,但是很多地方使用table还是有很多优势,用table展示数据是比较方便的,下面汇总了jQuery操作Table tr td常用的方法,熟记这些操作技巧,下 ...

  8. 汇总常用的jQuery操作Table tr td方法

    虽然现在DIV+CSS进行页的布局大行其道,但是很多地方使用table还是有很多优势,用table展示数据是比较方便的,下面汇总了jQuery操作Table tr td常用的方法,熟记这些操作技巧,下 ...

  9. 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 ...

随机推荐

  1. 解决session失效之后登陆后重新返回之前的页面

    在全局拦截器设置保存之前的url存入session中 登陆之后的地址再重session中存 request只用作一次请求 如果页面跳转几次的话原来的url就不存在了建议存在session @Overr ...

  2. 用Python操作Excel2007 及以上的版本读写，来自官方的Demo

    大牛请略过,新手可以参考,具体见下面的代码注释, 另外一个问题,想学习这个语言,最好还是英语牛一些,可以去官网多看看有用的类库,汉语的资料不是很全 #运行环境 3.4,下面这个操作Excel的包是针对 ...

  3. 《Genesis-3D开源游戏引擎完整实例教程-跑酷游戏篇03：暂停游戏》

    3.暂停游戏 暂停游戏概述: 在游戏进行时,玩家有可能会遇到多种突发事件.在跑酷游戏中突发状况的发生对游戏的影响更甚,游戏进行时玩家死亡,游戏只能从头开始,那么如果因为外界因素而影响游戏的进行,显然是 ...

  4. 洛谷 P1373 小a和uim之大逃离

    2016-05-30 12:31:59 题目链接: P1373 小a和uim之大逃离 题目大意: 一个N*M的带权矩阵,以任意起点开始向右或者向下走,使得奇数步所得权值和与偶数步所得权值和关于K的余数 ...

  5. android 链接蓝牙不稳定的解决建议

    My workaround I scan BLE for a short period of time 3-4 seconds then I turn scan OFF for 3-4 seconds ...

  6. Win7旗舰版的nfs服务器如何架设？ - Microsoft Community

    Win7旗舰版的nfs服务器如何架设? - Microsoft Community Win7旗舰版的nfs服务器如何架设?

  7. C语言/C++中怎样产生随机数

    C语言/C++怎样产生随机数:这里要用到的是rand()函数, srand()函数,和time()函数. 需要说明的是,iostream头文件中就有srand函数的定义,不需要再额外引入stdlib. ...

  8. BNUOJ 26579 Andrew the Ant

    LINK:Andrew the Ant 题意:给一根长度为L的木头,上面有A只蚂蚁[每只蚂蚁给出了初始行走的方向,向左或向右].当两只蚂蚁相碰时,两只蚂蚁就朝相反的方向行走~╮(╯▽╰)╭问的是:最后 ...

  9. Oracle- 备份单表结构和单表数据

    在网上看到,有用,记录如下: 这是Oracle的备份表结构和数据,因为实际工作对表进行大规模的数据改动都要讲数据进行备份,否则丢了数据那是很头疼的事情. --创建一份表结构 create table ...

  10. RocketMQ在linux平台下环境搭建

    RocketMQ在linux下部署运行和window类似,只不过启动namesrv和broker是通过mqnamesrv.sh 和 mqbroker.sh来启动的. 一.  环境搭建 需要jdk1.6 ...