<!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. Zabbix探索：使用msmtp进行邮件告警

    在Nagios时代就已经使用msmtp发送告警了,不过那时候偷懒,使用mutt发送来简化格式. 在Zabbix时代,更多人使用msmtp,所以官方论坛上有个zext_msmtp.sh的脚本,但是不要以 ...

  2. 浏览器中显示视频，flash等的代码处理

    window.flashView=function(flash_url){ var html=''; html+='<div id="obj_flash_div">'; ...

  3. 【原创】setjmp longjump一些注意点及使用方法

    setjmp longjump一些注意点及使用方法 jmp_buf结构体的定义 #define _JBLEN  9typedef struct { int _jb[_JBLEN + 1]; } jmp ...

  4. TCP/IP 相关总结

    1.   三次握手协议 在TCP/IP协议中,TCP协议提供可靠的连接服务,采用三次握手建立一个连接. 第一次握手:建立连接时,客户端发送syn包(syn=j)到服务器,并进入SYN_SEND状态,等 ...

  5. mysql 查询多个id

    select * from b1 where find_in_set('4',id); select * from b1 where id in (1,2,3,22);

  6. [iOS基础控件 - 4.2] APP列表 字典转模型Model

    A.使用字典加载数据的缺点 1.用户自行指定key,容易出错 2.存入.取出都需要key,容易混乱   B.模型 (MVC中的model) 1.字典与模型对比: (1)字典:存储数据,通过字符串类型的 ...

  7. [Objective-c 基础 - 1.2] OC的基本类

    #import <Foundation/Foundation.h> typedef enum {GenderMan, GenderFemale} Gender; typedef enum ...

  8. 怎样在Java中实现基本数据类型与字符之间的转换

    摘要:在我们对Java的学习当中数据类型之间的转换,是我们常见的事,我们也都知道基本数据类型之间有自动转换和强制转换,在int   . short  . long .float .double之间的转 ...

  9. maven快速入门

    一.maven maven可以说是管理项目的优秀工具,管理jar包 二.mave安装 1.先安装jdk(本文不详细讲) 2.安装maven ①.maven下载   http://maven.apach ...

  10. JS幻灯片,循环播放,滚动导航,jQuery平滑旋转幻灯片

    最近在帮别人改一些东西,在网上找了好久,但是没有相同的,自己改了下,拿出来分享下: 先展示下效果把: index.html 页面展示代码 <!DOCTYPE html PUBLIC " ...