HTML/CSS角を丸くした表、JavaScriptの境界線の変更が機能しない

Question

角が丸いテーブルがあります。

.table-bordered 
    { 
    border: 1px solid @tableBorder; 
    border-collapse: separate; 
    .border-radius(@baseBorderRadius); 
    } 

これは素晴らしい作品：このため 基本的なCSSは、私が.table-接さこのようなテーブル要素にクラスを追加したことです。 しかし、私たちはjavascriptでドラッグ機能を実装しました。要素をテーブル行にドラッグすることは可能です。

は、彼らがに要素をドラッグしているどのような行をユーザーに示すために、私はこのようなTRに点線の境界線を追加したい：私はTRの上にドキュメントをドラッグすると

tr.dropzone-active { 
    border: 3px dashed darken(@portletBorderColor, 10%); 
    .box-shadow(0 0 10px 0 rgba(0, 0, 0, .25)); 
    .scale(1.01); 
} 

だから、私は追加しますクラスdropzone-TRをアクティブにしてボーダーを変更します。 ボックスシャドウと.scaleはこれで動作します。しかし、境界は変更されません（3pxと破線）。私はこれを削除した場合

border-collapse: separate; 

、ドラッグ＆ドロップの境界線の変更は、しかし、その後、私の角を丸くされていません。このため 理由は、テーブルのCSS要素です。 これを修正する方法はありますか？

たとえば、border-collapseを追加するには：dropzone-active要素などに折りたたみますか？

Answer 1

この効果を目指していましたか？

.table { 
 
    display:block; 
 
    width: 100px; 
 
    padding:20px; 
 
    margin-top: 10px; 
 
    margin-left:10px; 
 
    margin-right:10px; 
 
    border-collapse: separate; 
 
    border-spacing: 0; 
 
    border: 1px solid black; 
 
    border-radius: 6px; 
 
    -moz-border-radius:6px; 
 
    -webkit-border-radius:6px; 
 
    border-style: hidden; /* hide standard table (collapsed) border */ 
 
    box-shadow: 0 0 0 1px #666; /* this draws the table border */ 
 
} 
 
tr.dropzone-active { 
 
    border-style: dotted; 
 
} 
 
table tr th, 
 
table tr td { 
 
    border-right: 1px dotted #bbb; 
 
    border-bottom: 1px dotted #bbb; 
 
    border-left: 1px dotted #bbb; 
 
    padding: 5px; 
 
} 
 
/* top-left border-radius */ 
 
table tr:first-child th:first-child { 
 
    border-top-left-radius: 6px; 
 
} 
 

 
/* top-right border-radius */ 
 
table tr:first-child th:last-child { 
 
    border-top-right-radius: 6px; 
 
} 
 

 
/* bottom-left border-radius */ 
 
table tr:last-child td:first-child { 
 
    border-bottom-left-radius: 6px; 
 
} 
 

 
/* bottom-right border-radius */ 
 
table tr:last-child td:last-child { 
 
    border-bottom-right-radius: 6px; 
 
} 
 
table tr th:first-child, 
 
table tr td:first-child { 
 
    border-left: 1px solid #bbb; 
 
}

<table class="table"> 
 
<thead> 
 
    <tr class="dropzone-active"> 
 
    <th>1</th> 
 
    <th>2</th> 
 
    </tr> 
 
</thead> 
 
<tbody> 
 
    <tr> 
 
    <td>fname</td> 
 
    <td>lname</td> 
 
    </tr> 
 
    
 
</tbody> 
 
</table>