Artem Fitiskin Artem Fitiskin - 7 days ago 4
CSS Question

Change the width of table with border-collapse: collapse

I am fully confused in this situation. When I change the border-width of table (dynamically, with JavaScript or in Chrome Dev Tools) with

border-collapse: collapse;
from 1px (#1) to big value (#2) and back to 1px (#3), I am get visual defect. #1 and #3 are identical, but they have a different appearance. Why is this happening?

HTML:

<table style="border-collapse: collapse; width: 1px #ddd solid;">
<tbody>
<tr>
<td>
<a href="javascript:void(0);">Crazy Button</a>
</td>
</tr>
</tbody>
</table>


Working demo here

Answer

Hack-solution is force to redraw item:

item.style.display = 'none';
item.offsetHeight; 
item.style.display = 'table';