How to make border and background in ie display together?

Question

css

There is a design below. Works correctly in all browsers except Internet Explorer, in which the borders of the cells are not visible. If you remove the background, then the borders become visible, that is, as I understand them, they are overshadowed by the background color. How can I get them to make friends and show up together?

<style>
table#ass td, th { border: 1px solid black; }
</style>
<table id="ass">
<tbody>
<tr>
<th rowspan="2" style="text-align: center; font-weight: bold; background-color: #ccccff; color: #2c2c2c; width:79px;">1</th>
<th rowspan="2" style="text-align: center; font-weight: bold; background-color: #ccccff; color: #2c2c2c; ">2</th>
<th colspan="16" style="text-align: center; background-color: #ccccff; color: #2c2c2c;"><span style="font-weight: bold;">3</span>
</th>
</tr>
</tbody>
</table>