The minimal code is given below. Note that -
- I need 1px border(I think that means need border-collapse).
- Also transition and background-color change cannot be compromised.
- CSS only solution.
Am doing wrong or would you have a fix/alternate, or its a bug. Please help me out. Thank you.
<!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>