<!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. Poj 1953 World Cup Noise之解题报告

    World Cup Noise Time Limit: 1000MS   Memory Limit: 30000K Total Submissions: 16369   Accepted: 8095 ...

  2. python包管理工具

    pip 是一个安装和管理 Python 包的工具 , 是 easy_install 的一个替换品.本文将详细说明 安装 pip 的方法和 使用 pip 的一些基本操作如安装.更新和卸载 python ...

  3. MFC用PostMessage传递消息

    1.自定义消息ID. #define WM_MY_MESSAGE (WM_USER+100)         WM_USER为windows系统为非系统消息保留的ID,这里至少要用100,因为其它控件 ...

  4. HDU-4686 Arc of Dream 构造矩阵

    题目链接:http://acm.hdu.edu.cn/showproblem.php?pid=4686 因为ai = ai-1*AX+AY ,bi = bi-1*BX+BY ,那么ai*bi=AX*B ...

  5. c功能实战

    1,linux C连接ftp实现简单的上传下载; libcurl/libftp/busybox; oracle查看用户信息 1. 查询oracle中所有用户信息 select * from dba_u ...

  6. Java中使用ThreadPoolExecutor并行执行独立的单线程任务

    Java SE 5.0中引入了任务执行框架,这是简化多线程程序设计开发的一大进步.使用这个框架可以方便地管理任务:管理任务的生命周期以及执行策略. 在这篇文章中,我们通过一个简单的例子来展现这个框架所 ...

  7. lazyload 图片延迟加载

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...

  8. ISE和Modelsim联合仿真（转）

    相信很多人会遇到过这个问题,不知如何让ISE调用Modelsim进行仿真.我也迷糊了不少时间,查查找找,终于弄明白了,所以有了本文,和大家分享一下.我尽量讲得详细点儿,多多上图. 我的环境:Windo ...

  9. mybatis的辅助类

    package org.ssi.util; import java.io.InputStream; import org.apache.ibatis.session.SqlSession; impor ...

  10. APP上架详细流程-2016最新

    注:文章为博主原创,转载请注明出处 由于新项目要上架,并且发现了与以往不同的地方特此总结 原料: 0.MAC一台 1.可用的开发者账号 2.AppID 3.发布证书 4.描述性文件 上架步骤: 一.在 ...