Why Chrome overwrites height & overflow CSS

Question

I am having a problem with the following page in plunker. I also have tested it outside of plunker and I get the same result. My problem is that the following CSS get lost somehow. When I look at the computed CSS in chrome the width and height are different even when I can see that it recognized that rule. I am using bootstrap CSS.

table.scroll {
   width: 40px;
   height: 40px;
   overflow: scroll;
}

EDIT:

The intention was to make the table scroll-able. But there no scroll bar appears. The CSS looks correct but apparently it does not work on tables. And the browser just ignores the CSS.

Computed CSS

What is it been overwritten by? Chrome will tell you what it's using in the computed styles section(it'll have files and line numbers you can click to go to the declaration). — scragar, May 23 '14 at 16:42
@scragar it does not say. It just has my rule and then a different value! Easier to see in the plunker link. — Arturo Hernandez, May 23 '14 at 16:47
@scragar there is the image. You could also click on the link. — Arturo Hernandez, May 23 '14 at 17:11
`` elements usually end up being special cases. I'm not even sure how a table *should* react to overflow. Can you wrap the table in a div and scroll that instead? — loganfsmyth, May 23 '14 at 17:19
Give screenshot of problem you are facing not the codes that disappears — Skyyy, May 23 '14 at 18:02
@SkyKumar I think loganfsmith is correct. It is the table that is preventing the scroll. — Arturo Hernandez, May 23 '14 at 21:30

score 0 · Accepted Answer · edited May 23 '17 at 11:57

0

According to the W3C, user agents may reflow tables if the width of their cells is greater than the width that the author specifies. Chrome cannot possibly fit all of that data in a 40x40 table, so it scales it up to fit.

There are some ways to fix the width of the area containing a table, but it will probably require extra markup.

edited May 23 '17 at 11:57

Community

1
1

answered May 23 '14 at 18:02

ajm

19,795
3
32
37

Why Chrome overwrites height & overflow CSS

1 Answers1