采用 CSS3 技術實現具有圓角效果的表格

本文將介紹如何通過 CSS3 實現具有圓角效果的表格，無需修改表格的HTML定義。同時還將引入 jQuery 實現對表格的行進行鼠標高亮顯示。

因為使用 CSS3 ，因此對 IE8 以及更老的版本無法支持圓角顯示。

效果如下圖顯示：

在線演示

特點：

• 無需圖片
• 無需對 HTML 進行修改
• 用戶友好而且代碼易于理解

圓角表格

在這里我們使用了 border-collapse，該屬性默認值是 separate ，我們需要改為 0

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

在 IE6 下 :hover 在 non-anchor 元素上是無效的，所以我們必須使用如下方法：

.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 效果，需要使用 CSS3

.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

The tables already degrade very nice on older browsers, so it’s up to you if you want to use also the above jQuery solutions. It’s all about the visitors audience you’re targeting.

View demo