采用 CSS3 技术实现具有圆角效果的表格
fmms
13年前
<p>本文将介绍如何通过 CSS3 实现具有圆角效果的表格，无需修改表格的HTML定义。同时还将引入 jQuery 实现对表格的行进行鼠标高亮显示。</p> <p>因为使用 CSS3 ，因此对 IE8 以及更老的版本无法支持圆角显示。</p> <p>效果如下图显示：</p> <p><img title="采用 CSS3 技术实现具有圆角效果的表格" border="0" alt="采用 CSS3 技术实现具有圆角效果的表格" src="https://simg.open-open.com/show/ae2996ffe4a881d77765f4ec13e05830.png" width="600" height="200" /></p> <p></p> <p><a href="/misc/goto?guid=4958340506552737339" rel="nofollow">在线演示</a></p> <h3>特点：</h3> <ul> <li>无需图片</li> <li>无需对 HTML 进行修改</li> <li>用户友好而且代码易于理解</li> </ul> <h3>圆角表格</h3> <p>在这里我们使用了 <code>border-collapse，该属性默认值是 separate ，我们需要改为 0</code></p> <pre class="brush:css; toolbar: true; auto-links: false;"><code>table { *border-collapse: collapse; /* IE7 and lower */ border-spacing: 0; }</code></pre> <p><code></code></p> <code></code> <p></p> <p><em>对 IE7 或者更老的版本，需要添加一个特殊的行。</em></p> <p>接下来我们创建圆角:</p> <pre class="brush:css; toolbar: true; auto-links: false;">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; }</pre> <p></p> <p></p> <h3>jQuery hover fallback</h3> <p>在 IE6 下 :hover 在 non-anchor 元素上是无效的，所以我们必须使用如下方法：</p> <pre class="brush:css; toolbar: true; auto-links: false;">.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; }</pre> <p></p> <p></p> <p>可以使用 jQuery 来模拟 hover 效果</p> <pre class="brush:js; toolbar: true; auto-links: false;">$('.bordered tr').mouseover(function(){ $(this).addClass('highlight'); }).mouseout(function(){ $(this).removeClass('highlight'); });</pre> <p></p> <p></p> <p>为 <code>highlight</code> class增加效果:</p> <pre class="brush:css; toolbar: true; auto-links: false;">.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; }</pre> <p></p> <p></p> <p><em>The above is basically the <code>.bordered tr:hover</code> duplicate.</em> </p> <h3>jQuery zebra fallback</h3> <p>为了创建 <em>zebra</em> 效果，需要使用 CSS3</p> <pre class="brush:css; toolbar: true; auto-links: false;">.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; }</pre> <p></p> <p></p> <p>Now, the above selector is a CSS3 one – so no support for older browsers. Below you’ll see how we may <strong>target and style the even rows for all browsers</strong>:</p> <pre class="brush:css; toolbar: true; auto-links: false;">$(".zebra tbody tr:even").addClass('alternate');</pre> <p></p> <p></p> <p><em>A simple jQuery line.</em></p> <pre class="brush:css; toolbar: true; auto-links: false;"><em>.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; }</em></pre> <p></p> <p></p> <p><em>The CSS class that will style the even rows.</em></p> <h3>Browser support</h3> <p>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.</p> <p><img title="采用 CSS3 技术实现具有圆角效果的表格" border="0" alt="采用 CSS3 技术实现具有圆角效果的表格" src="https://simg.open-open.com/show/825e3ac59bdbee7b3b5cbc7bbcefaa30.png" width="600" height="200" /></p> <p><a href="/misc/goto?guid=4958340506552737339" rel="nofollow">View demo</a></p>