2

現在、次のようにテーブルに丸い境界線を実装しています。

.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 は問題ありません。すべてのテーブルが静的であるか、動的テーブルの最初と最後の行が静的であると想定できます。

4

1 に答える 1

0

jsFiddle Demo

ちょっと面白い状況。本当に重要な部分は、テーブルの右下隅のテーブル セルを識別することです。他のものは、従来の手段で見つけることができます。

これがあなたのアプローチよりもきれいかどうかはわかりません。offsetまた、その機能のためにjQuery（申し訳ありません）を使用しました。この関数は、コードに jQuery を含めなくても簡単に使用できますが、この例では、少し簡潔にするために、jQuery を使用しました。

このアプローチは、ページに対する最小/最大の上と左の位置に基づいて 4 つのコーナーを並べ替えます。

(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 を手動で決定する代わりに、推奨される代替手段です。

于 2013-05-19T23:59:11.043 に答える