0

I have a table which has the same width but i need the header fixed so I use this attribute (fixed) at header but oh surprise! when I use this attribute the header changes it size and now is smaller than the other part of the table...It's like if it the table is now wrap content (like in android attribute) and If i delete the attribute:fixed line my header gets the same width of the rest of the table, How can I use fixed and without lose the originally width?

My hedaer

th{
    position: fixed;
 top: -90px;
 font-family: 'Open Sans', sans-serif;
 font-size: 30px;
 height: 20px;
 background-color: white;
 color: #525552;
 text-align: center;
}

and my tds

td{
 border: 2px solid #525552;
 width: 164.7px;
 margin-top: 50px;
 font-family: 'Open Sans', sans-serif;
}
Carlos Mtz
  • 151
  • 1
  • 1
  • 14

1 Answers1

1

You can't!

A position:fixed element is not subject to any other element on the page, but to the viewport only:

MDN Definition

Fixed positioning is similar to absolute positioning, with the exception that the element's containing block is the viewport.

So, if you set the position to fixed, you can no longer inherit the parent's width (in this case, the table)

LcSalazar
  • 16,524
  • 3
  • 37
  • 69