如何解决鼠标从上到下移动时,td 的边框在 Edge(V-91) 中消失如果您从表格底部滚动或移动鼠标,它会重新出现
下面给出了最少的代码。请注意 -
- 我需要 1px 边框(我认为这意味着需要边框折叠)。
- 也不能影响过渡和背景颜色的变化。
- 仅使用 CSS 的解决方案。
我做错了,或者你有修复/替代,或者它的错误。请帮帮我。谢谢。
<!DOCTYPE html>
<html><head>
<Meta charset="utf-8">
<Meta name="viewport" content="width=device-width,initial-scale=1.0">
<style>
#wrap-div{display:flex;}
#com_table{width:800px; border-collapse:collapse; border-spacing:0px; margin:50px auto;text-align:center}
th,td{border:1px solid #3AC;}
#com_table > tbody > tr:hover{color:#fff; background-color:#aaa; transition:all .25s linear;}
</style>
</head>
<body>
<div id="wrap-div">
<table id="com_table">
<thead>
<tr>
<th>Order Date</th>
<th>Status</th>
<th>Total Amt</th>
</tr>
</thead>
<tbody>
<tr>
<td>24/05/2021</td>
<td>NEW</td>
<td>900.00</td>
</tr>
<tr>
<td>24/05/2021</td>
<td>CONFIRMED</td>
<td>900.00</td>
</tr>
<tr>
<td>28/05/2021</td>
<td>CONFIRMED</td>
<td>850.00</td>
</tr>
<tr>
<td>28/05/2021</td>
<td>CONFIRMED</td>
<td>1845.00</td>
</tr>
<tr>
<td>15/05/2021</td>
<td>SETTLED</td>
<td>4221.00</td>
</tr>
<tr>
<td>17/05/2021</td>
<td>SETTLED</td>
<td>1549.00</td>
</tr>
<tr>
<td>17/05/2021</td>
<td>SETTLED</td>
<td>250.00</td>
</tr>
<tr>
<td>18/05/2021</td>
<td>SETTLED</td>
<td>1249.00</td>
</tr>
</tbody>
</table>
</div>
</body>
</html>
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。