圆形表格边框

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上。