<!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. Quartz动态配置表达的方法

    在项目中有一个需求,需要灵活配置调度任务时间,并能自由启动或停止调度.有关调度的实现我就第一就想到了Quartz这个开源调度组件,因为很多项目使用过,Spring结合Quartz静态配置调度任务时间, ...

  2. Tomcat 7 Connector 精读（1）

    这个类图是本人截取的最重要的类的方法和属性. 其中ProtocalHandler是协议处理器,tomcat支持的协议以下方法可以看到.不同协议实现了不同的ProtocalHandler类. publi ...

  3. Harris 角点检测

    一 .Motivation 对于做图像处理的人来说,Harris角点检测肯定听过,1988年发表的文章"A combined corner and edge detector"描述 ...

  4. [iOS基础控件 - 3.4] 汤姆猫

    @import url(http://i.cnblogs.com/Load.ashx?type=style&file=SyntaxHighlighter.css); @import url(/ ...

  5. BAT及各大互联网公司2014前端笔试面试题：JavaScript篇

    前面几题是会很基础,越下越有深度. 初级Javascript: 1.JavaScript是一门什么样的语言,它有哪些特点? 没有标准答案. 2.JavaScript的数据类型都有什么? 基本数据类型: ...

  6. 【C++编程规范】编程需要避免的常见错误

    前言 C++有不少陷阱或者容易失误的地方,稍不注意就会导致程序bug. 正文 1.无符号数和有符号数比较 #define只是简单的文本替换,如果替换的是简单数值,默认是int,和unsigned in ...

  7. 网站WAF的检测

    [wafw00f]: 项目地址: https://github.com/sandrogauci/wafw00f WAFW00F是识别和指纹Web应用防火墙(WAF)产品,其工作原理是首先通过发送一个正 ...

  8. .Net Core静态文件中间件StaticFiles的使用

    以前,当我们的网站需要显示图片的时候,直接在网站目录下新建文件夹,把图片放在这个文件夹下,然后通过文件夹的路径就可以访问到. 但是在.net core中不可以这样,要通过中间件StaticFiles配 ...

  9. Asp.Net事务和异常处理：

    Asp.Net事务和异常处理: 一.什么是事务处理? 事务处理是一组组和成逻辑工作单元的数据库操作,虽然系统中可能会出错,但事务将控制和维护每个数据库的一致性和完整性. 如果在事务过程中没有遇到错误, ...

  10. eclispe搭建android平台

    1.不推荐在线安装android ADT,因为需要FQ.可以在网上下载ADT,然后离线安装. 离线安装方式:help->Install ->点击add然后选择你的安装包(不需要解压),一直 ...