Horizontal center the table

Tags: #<Tag:0x00007efc72918960>
#1

Hi,

I am using handsontable and I would like to show a table centered in the page or a div.

I have managed to do this by changing the css of the “.wtHider” div. However it’s not working with row headers.

CSS :

html {
    body {
        .handsontable {
            font-size: 13px;

            &.center {
                .wtHider {
                    margin-left : auto;
                    margin-right : auto;
                }
            }
        }
    }
}

Centered without row headers :

2.jpg924×345 54.5 KB

Centered withrow headers :

1.jpg924×345 56.9 KB

Can you help me and say me how I can center my table please ?
Thanks a lot.
Antoine Duval.

#2

Hey @duval.antoine

here’s an example that you can use https://jsfiddle.net/72gj0ur5/

Let me know if it works in your project

#3

Hi @aleksandra_budnik,

Thanks for your answer, but your solution is based on hard fix the width in pixels :confused:

That’s a thing I prefer to avoid.
Is there an other solution ?

Thanks,
Antoine Duval.

#4

Handsontable is defined in pixels (it does not understand the percentages) but your parent container is fluid.

#5

Ok, so if I understand, the parent container can have a width in percents. But if the parent is larger than the table, the table will not be center because it needs to be set in pixels.

Am I true ?

#6

Yes, here is an example with a parent that has 80% width https://jsfiddle.net/eyuL1sqc/

But if the parent is larger than the table, the table will not be center because it needs to be set in pixels.

The parent needs to be wider than the child (table). That won’t do you any favors https://jsfiddle.net/48dLnsau/

1 Like
#7