Search code examples
htmlcssviewport

I have two width declarations. Which one will get applied?

Let's say we have a HTML page which has the structure as

<html>
<body>
    <table id="myTable">
    </table>
</body>
</html>

Now I have a CSS defined as;

#myTable {width:100%;width:900px;}

Now my question is this table is indirectly also affected by the viewport (or available browser space) So what out of the 2 values (px or %) would win ? That is how much space would the table actually take in the layout ? If current browser space is, say 1000px, would it take that value (which means 100% overriding 900 px value) At a broader level, can we generalize this working that % or px value always wins ? Would this depend on the DOCTYPE that is set ?

Solution

  • So what out of the 2 values (px or %) would win ?

    The pixel width would win, but not because it is defined with a pixel unit.

    Since the two rules appear in the same ruleset, their selectors have equal specificity (because they are identical), so the last one wins.

    The choice of units is irrelevant.