tr { overflow: hidden; }

June 3, 2011

tr { overflow: hidden; } is bad. It turns out that this simple CSS option causes rows cells that span rows to overwrite or hide content in the cells that they span.

Unfortunately, I can’t create a simple example. The page where I saw this uses an external CSS file as well as a lot of style information for tables, rows, and cells. What I see using Chrome and inspecting the elements is that there is no background-clip property associated with the table, tr, and td elements, on the page that fails. When I tried to create a table with the same problem here on the blog page, I saw a background-clip property and the table could not be made to fail.

I suspect that other styles somehow affected my table but the fix was as simple as removing the overflow: hidden; option for the tr elements.