<!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. 在windows xp 平台上安装mvc4失败

    使用web 平台安装程序,在windows xp上安装mvc4 出现失败,需要主要是windows powershell 2.0安装失败,需要先卸载power shell 1.0或者 winowrm ...

  2. BNUOJ-26579 Bread Sorting YY

    题目链接:http://www.bnuoj.com/bnuoj/problem_show.php?pid=26579 考虑两个性质:蚂蚁的相对位置不变,蚂蚁碰撞时相当于对穿而过,然后排两次序就可以了. ...

  3. CoreSeek中文检索引擎

    目的:安装coreseek中文检索引擎,配置MySQL数据库访问接口,使用PHP程序实现中文检索. CoreSeek官方网站: http://www.coreseek.cn/ http://www.c ...

  4. 问题-Delphi控件选择卡自动选择与滚动方法

    问题现象: 在D7的控件工具条中每次要手动点向左向右很累,有没有方法可以自动移动.   问题解决: REGEDIT4 [HKEY_CURRENT_USER\Software\Borland\Delph ...

  5. js使用技巧大全

    1.防止重新构建 var constructedHtml = ""; for(var i = 0,len = arr.length;i < len;i++){ constru ...

  6. Egret的第一个2048游戏

    http://bbs.egret-labs.org/thread-242-1-1.html 对于AS3的开发者来说,可以直接过渡到的HTML5框架就是Egret了,基本上是了解了TypeSprite的 ...

  7. matlab color_rain colorbar

    来自http://www.aos.wisc.edu/~dvimont/matlab/Graphics_Tools/color_rain.html Listing of script color_rai ...

  8. 查看linux中的TCP连接数【转】

     转自:http://blog.csdn.net/he_jian1/article/details/40787269 查看linux中的TCP连接数 本文章已收录于:   计算机网络知识库  分类: ...

  9. mysql之数据库备份与恢复

    备份与恢复 系统运行中,增量备份与整体备份. 例如:每周日整体备份一次,周一到周六只备份当天. 如果周五的数据出了问题,可以用周日的整体+周一.周二.周三.周四来恢复. 备份的工具: 有第三方的收费备 ...

  10. VMware 虚拟机安装 Mac OS X Mountain Lion 苹果系统

    国内私募机构九鼎控股打造APP,来就送 20元现金领取地址:http://jdb.jiudingcapital.com/phone.html内部邀请码:C8E245J (不写邀请码,没有现金送)国内私 ...