我有一张圆 Angular table 。 基本的 CSS 是我在表格元素上添加了 .table-bordered 类,如下所示:
.table-bordered
{
border: 1px solid @tableBorder;
border-collapse: separate;
.border-radius(@baseBorderRadius);
}
这很好用。 但是我们已经在 javascript 中实现了拖动功能。可以将元素拖到表格行中。
为了向用户显示他们将元素拖到哪一行,我想像这样向 TR 添加虚线边框:
tr.dropzone-active {
border: 3px dashed darken(@portletBorderColor, 10%);
.box-shadow(0 0 10px 0 rgba(0, 0, 0, .25));
.scale(1.01);
}
因此,当我将文档拖到 TR 上时,我将类 dropzone-active 添加到 TR 以更改边框。 Box-shadow 和 .scale 适用于此。但边框没有改变(变为 3px 和虚线)。 原因是 table-css 元素:
border-collapse: separate;
如果我删除它,拖放边框会改变,但我的边 Angular 不会变圆。 有办法解决这个问题吗?
例如添加 border-collapse: collapse 到 dropzone-active 元素或其他东西?
最佳答案
你的目标是这种效果吗?
.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>
关于带圆 Angular 的 HTML/CSS 表格,javascript-border 更改不起作用,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/47054186/