html - jQuery隐藏额外边框列表项

Question

我的代码如下所示：http: //jsfiddle.net/eLyJA/

我怎样才能计算和删除所有的边界边缘，所以它看起来像这样：

Answer 1

编辑：我还发现了一个相当不错的跨浏览器“hack”，可以让解决方案在旧版本的 IE 中运行。

演示：http: //jsfiddle.net/n1ck/p3SCR/4/

我在之前的解决方案中添加了：

table {
    border-color:transparent; 
    border-style:solid; 
}

table td {
    border: 1px solid black;
}

---

您可以通过 CSS 实现这两种方式：

http://jsfiddle.net/eLyJA/3/

table {
    border-collapse: collapse;
}
table td {
    padding:80px;
    border: 1px solid black;
}
table tr:first-child td {
    border-top: 0;
}
table tr:last-child td {
    border-bottom: 0;
}
table tr td:first-child{
    border-left: 0;
}
table tr td:last-child,
    border-right: 0;
}​

在这里，通过设置表frame="void"

http://jsfiddle.net/eLyJA/7/

<table border="1" frame="void">

Answer 2

用于循环来实现这一点：http: //jsfiddle.net/eLyJA/15/

var total = $("ul li").size();

$().ready(function () {
    for( i=2; i < total ; i+=3){
        $('ul li:nth-child(' + i + ')').each(function(n) {
            $(this).css({
                'border-right': '1px solid #000',
                'border-bottom': '1px solid #000',
                'border-left': '1px solid #000'
            });
        });
    }

    j = total;
    k = total - 3;
    for( j=total ; j > total-3; j--){
        $('ul li:nth-child(' + j + ')').each(function(n) {
            $(this).css({
                'border-bottom': 'none'
            });
        });
    }
});