圆角表格边框

Question

我目前在表格上实现圆形边框，如下所示：

.tbor {
    border-width:3px;
    border-style:solid;
    border-color:lighten(@col-border,10%) darken(@col-border,10%) darken(@col-border,10%) lighten(@col-border,10%);
    border-radius:12px;
}
.tbor>tr>td, .tbor>thead>tr>td, .tbor>tbody>tr>td, .tbor>tfoot>tr>td, .tbor>tr>th, .tbor>thead>tr>th, .tbor>tbody>tr>th, .tbor>tfoot>tr>th {
    border: 1px solid @col-border;
    padding: 2px;
}
.tbor_tl {border-top-left-radius: 8px;}
.tbor_tr {border-top-right-radius: 8px;}
.tbor_br {border-bottom-right-radius: 8px;}
.tbor_bl {border-bottom-left-radius: 8px;}

这很好用，但它需要我在左上角、右上角、左下角和右下角的单元格上手动设置类。

在另一个项目中，我对单元格使用了以下规则：

.tbor>thead>tr:first-of-type>td:first-of-type,.tbor>colgroup+tbody>tr:first-of-type>td:first-of-type,.tbor>tbody:first-child>tr:first-of-type>td:first-of-type,.tbor>tr:first-of-type>td:first-of-type{border-top-left-radius:8px}
.tbor>thead>tr:first-of-type>td:last-of-type,.tbor>colgroup+tbody>tr:first-of-type>td:last-of-type,.tbor>tbody:first-child>tr:first-of-type>td:last-of-type,.tbor>tr:first-of-type>td:last-of-type{border-top-right-radius:8px}
.tbor>tbody:last-child>tr:last-of-type>td:first-of-type,.tbor>tfoot>tr:last-of-type>td:first-of-type,.tbor>tr:last-of-type>td:first-of-type{border-bottom-left-radius:8px}
.tbor>tbody:last-child>tr:last-of-type>td:last-of-type,.tbor>tfoot>tr:last-of-type>td:last-of-type,.tbor>tr:last-of-type>td:last-of-type{border-bottom-right-radius:8px}

这是一个丑陋的混乱，它完全依赖于所有表格单元格是 1x1。当任何单元格（尤其是底部的单元格）具有colspan 或rowspan 时，它会完全崩溃。

有没有办法做到这一点？ JavaScript 没问题：可以假设所有表都是静态的，或者动态表具有静态的第一行和最后一行。

Answer 1

jsFiddle Demo

一种有趣的情况。真正重要的部分来自识别表格的右下角表格单元格。其他的可以通过常规方式找到。

我不确定这是否比您的方法更干净。另外，我使用 jQuery（对不起）来实现它的offset 功能。如果您的代码中不包含 jQuery，则可以轻松获取该函数，但在本示例中，为了简洁起见，我使用了它。

这种方法将根据四个角相对于页面的最小/最大顶部和左侧位置对它们进行排序。

(function (){
var tl = {};tl.x=99999;tl.y=99999;
var tr = {};tr.x=0;tr.y=99999;
var bl = {};bl.x=99999;bl.y=0;
var br = {};br.x=0;br.y=0;
$(".tbor td").each(function(){
    var cur = $(this).offset();
    if( cur.top <= tl.y && cur.left <= tl.x ){
     tl.x = cur.left;
     tl.y = cur.top;
     tl.td = this;
    }
    if( cur.top <= tr.y && cur.left >= tr.x ){
     tr.x = cur.left;
     tr.y = cur.top;
     tr.td = this;
    }
    if( cur.top >= bl.y && cur.left <= bl.x ){
     bl.x = cur.left;
     bl.y = cur.top;
     bl.td = this;
    }
    if( cur.top >= br.y && cur.left >= br.x ){
     br.x = cur.left;
     br.y = cur.top;
     br.td = this;
    }
});
tl.td.className += " tbor_tl";
tr.td.className += " tbor_tr";
bl.td.className += " tbor_bl";
br.td.className += " tbor_br";
})()

无论如何，这是一个建议的替代方案，而不是手动确定将类放在哪个 td 上。