Center Floating Head in Container

Question

Center Floating Head in Container

burgoyne opened this issue 5 years ago · 5 comments

So I am attempting to center my table inside it's div. I am centering the table by setting margin: 0px auto. In my project, the table is centered, but the header is not (it is off by 35px, which is the size of padding on my container div).

After inspecting it, it seems that the table element that floatThead creates for the header, is outside my container div... The actual table is inside though. So this results in my table being properly centered, but my header being slightly offset to the right.

Here is an image showing the offset (data blocked out):

I attempted to duplicate the issue with a fiddle, but it works fine! Has anyone had this issue where they're newly generated table for the header is outside the containing div?
https://jsfiddle.net/skx1u94d/1/

Answer 1 · 2019-09-10T15:32:22.000Z

Does this issue look like the other open issue?

…

On Tue, Sep 10, 2019, 11:26 AM burgoyne ***@***.***> wrote: So I am attempting to center my table inside it's div. I am centering the table by setting margin: 0px auto. In my project, the table is centered, but the header is not (it is off by 35px, which is the size of padding on my container div). After inspecting it, it seems that the table element that floatThead creates for the header, is outside my container div... The actual table is inside though. So this results in my table being properly centered, but my header being slightly offset to the right. Here is an image showing the offset (data blocked out): [image: table head padding] <https://user-images.githubusercontent.com/17754882/64627331-68ada180-d3bd-11e9-9b5c-1b6bd3fe0c33.png> I attempted to duplicate the issue with a fiddle, but it works fine! Has anyone had this issue where they're newly generated table for the header is outside the containing div? https://jsfiddle.net/skx1u94d/1/ — You are receiving this because you are subscribed to this thread. Reply to this email directly, view it on GitHub <#443?email_source=notifications&email_token=AAC5WSOFBQEALZYPVPOR5OLQI64CRA5CNFSM4IVJGW22YY3PNVWWK3TUL52HS4DFUVEXG43VMWVGG33NNVSW45C7NFSM4HKPNUZQ>, or mute the thread <https://github.com/notifications/unsubscribe-auth/AAC5WSPDE5AYNWOBDZRAU3DQI64CRANCNFSM4IVJGW2Q> .

Answer 2 · 2019-09-10T16:00:39.000Z

I noticed that other thread, but it does not seem to be the same issues. My problem seems to be caused by the generated table being placed outside the container. I assume it is a bug, potentially a configuration issue.

Trying to better explain:
If you look at my fiddle, there is a div with overflow and padding rules. The table is inside that. When floatThead generates the new table for the floating header, it is also inside that div.

On my project, I have a div with overflow and padding rules (identical to the fiddle), When the new table is generated by floatThead, it is positioned above/outside that div. So my margin 0px auto rule is not constrained inside the div (as my posted image states). Im hoping this has been seen before, as I have been struggling with it for hours now.

Answer 3 · 2019-09-10T16:31:09.000Z

Looking more into it, it does seem to be the same issue. I am going to try to resolve this based off of those answers.

Answer 4 · 2019-09-10T17:39:08.000Z

duplicate of #437

Answer 5 · 2020-02-22T18:59:15.000Z

This thread has been automatically locked since there has not been any recent activity after it was closed. Please open a new issue for related bugs.