使用 CSS3 制作具有圆角效果的表格:配置报错 

本文将介绍如何通过 CSS3 实现具有圆角效果的表格，无需修改表格的HTML定义。同时还将引入 jQuery 实现对表格的行进行鼠标高亮显示。 因为使用 CSS3 ，因此对 IE8 以及更老的版本无法支持圆角显示。 效果如下图显示：

在线演示

特点：

• 无需图片
• 无需对 HTML 进行修改
• 用户友好而且代码易于理解

圆角表格

table {
    *border-collapse: collapse; /* IE7 and lower */
    border-spacing: 0;
}

对 IE7 或者更老的版本，需要添加一个特殊的行。 接下来我们创建圆角:

th:first-child { -moz-border-radius: 6px 0 0 0; -webkit-border-radius: 6px 0 0 0; border-radius: 6px 0 0 0; }

th:last-child { -moz-border-radius: 0 6px 0 0; -webkit-border-radius: 0 6px 0 0; border-radius: 0 6px 0 0; }

th:only-child{ -moz-border-radius: 6px 6px 0 0; -webkit-border-radius: 6px 6px 0 0; border-radius: 6px 6px 0 0; }

jQuery hover fallback

.bordered tr:hover
{
  background: #fbf8e9;
  -o-transition: all 0.1s ease-in-out;
  -webkit-transition: all 0.1s ease-in-out;
  -moz-transition: all 0.1s ease-in-out;
  -ms-transition: all 0.1s ease-in-out;
  transition: all 0.1s ease-in-out;
}

可以使用 jQuery 来模拟 hover 效果

$('.bordered tr').mouseover(function(){ $(this).addClass('highlight'); }).mouseout(function(){ $(this).removeClass('highlight'); });

为 highlight class增加效果:

.highlight { background: #fbf8e9; -o-transition: all 0.1s ease-in-out; -webkit-transition: all 0.1s ease-in-out; -moz-transition: all 0.1s ease-in-out; -ms-transition: all 0.1s ease-in-out; transition: all 0.1s ease-in-out; }

The above is basically the .bordered tr:hover duplicate.

jQuery zebra fallback

.zebra tbody tr:nth-child(even) {
    background: #f5f5f5;
    -webkit-box-shadow: 0 1px 0 rgba(255,255,255,.8) inset;
    -moz-box-shadow:0 1px 0 rgba(255,255,255,.8) inset;
    box-shadow: 0 1px 0 rgba(255,255,255,.8) inset;
}

Now, the above selector is a CSS3 one – so no support for older browsers. Below you’ll see how we may target and style the even rows for all browsers:

$(".zebra tbody tr:even").addClass('alternate');

A simple jQuery line.

.alternate { background: #f5f5f5; -webkit-box-shadow: 0 1px 0 rgba(255,255,255,.8) inset; -moz-box-shadow:0 1px 0 rgba(255,255,255,.8) inset; box-shadow: 0 1px 0 rgba(255,255,255,.8) inset; }

The CSS class that will style the even rows.

Browser support