How can I adjust this fixed table header so it is left aligned instead of centred?

Question

So when I scroll, the table header is fixed but it aligns to the left instead of being centered - I am not sure where to center this. I have tried CSS and within the jquery with no success...

I have a full-width example working here... https://jsfiddle.net/vladi/vuoe35n7/

and now I wanted to change the width of the table to 660 pixels and center it.

I changed the css of the table from 98% to 660px and the margin from margin: 0 1% to margin: 0 auto

https://jsfiddle.net/rbla/m605k9ov

cant seem to get the cloned header to line up correctly?

  table {
      border-collapse:collapse;
      /* width: 98%; */
      /* margin: 0 1%; */
      width: 660px;
      margin: 0 auto;
  }

Any ideas on how to center this fixed table header so it matches the orginal? I am wondering if it is within the jquery

}

Possible duplicate of [CSS horizontal centering of a fixed div?](https://stackoverflow.com/questions/3157372/css-horizontal-centering-of-a-fixed-div) — Ryan Cogswell, Nov 05 '18 at 20:21

score 1 · Answer 1 · answered Nov 05 '18 at 19:43

1

The fixed header element is fixed (duh!) so the margin: auto trick won't work. The solution, however, is easy: add left: 0 and right: 0 to the fixed class and it'll center the content, like this:

.fixed {
  top:0;
  position:fixed;
  left: 0;
  right: 0;
  display:none;
  border-top:none;
  border-bottom:none;
}

As you can see, you can also get right of the width: 660px since it'll always be overriden by the javascript.

answered Nov 05 '18 at 19:43

José A. Zapata

1,187
1
6
12

Jose - your solution works - thanks - but I think Ryan's answer is more intuitive and may be a better fit. – Ronald Nov 06 '18 at 19:28

score 1 · Accepted Answer · answered Nov 05 '18 at 20:25

You can find another solution for this here. Look at the answer that starts with "The answers here are outdated" and includes the following approach:

left: 50%;
transform: translateX(-50%);

The "left: 0, right: 0" approach appears to work just fine, but I think this transform reads more obviously as trying to center the content, whereas with the "left:0, right:0" approach I have to try it to be convinced it doesn't force it to 100% width.

How can I adjust this fixed table header so it is left aligned instead of centred?

2 Answers2