Artem Fitiskin Artem Fitiskin - 9 months ago 45
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?


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

Working demo here

Answer Source

Hack-solution is force to redraw item: = 'none';
item.offsetHeight; = 'table';