Make table fit the size of the screen when adding vertical scroller

Isabelgh

To add scrollers to my Datatable I'm currently using:

scrollY: '50vh',
scrollX: true,

I'm using vh in order for the table header to always be visible when scrolling vertically. The problem is that the height of the table will change a lot according to how much data is in the table. I need a way for the table height to always be as long as the size of the browser window. Is there a way of doing this?

colin

This example from this thread seems to be doing what you want,

Colin

Isabelgh

Hi Colin, thank you for your answer.

I tried to do the same as in the example and add set these values for the scroller:

                scrollResize: true,
                scrollX: true,
                scrollY: 100,
                scrollCollapse: true,

The scrollers are working fine on the table, but for some reason the table height gets very small and the height is not adjusted to the size of the whole window.

Is it something I'm doing wrong here? stats is the the id of the table I have

 #stats {
    table-layout: relative;
    width: 100% !important;
    height: 100% !important;
    overflow: scroll;

  }

  #stats td,
  #stats th {
    width: auto !important;
    height: auto !important;
    white-space: normal;
    text-overflow: ellipsis;
  }

colin

We're happy to take a look, but as per the forum rules, please link to a test case - a test case that replicates the issue will ensure you'll get a quick and accurate response. Information on how to create a test case (if you aren't able to link to the page you are working on) is available here.

Cheers,

Colin

Isabelgh

Thank you, here I have a testcase that replicates the issue I'm having:

http://live.datatables.net/visageho/7/edit

As can be seen, the scrollers are put on correctly on the table but the table height does not fit the window, it gets very small. Only the width of the table follows the window size.

/Isabel

colin

If you change scrollY to be px or vh units, it appears to do what you want, see here.

Colin

Isabelgh

Yes by putting scrollY to vh or px the height of the table does increase but it goes beyond the size of the browser window. I would like the height to not be longer than the window height so you can see the bottom of the table on one page.

How can I have a table that will adjust to whatever the height/width of the window while still maintaining the scrollable feature?

/Isabel

kthorngren

Maybe this blog about the scrollResize plugin will do what you want.

Kevin

Isabelgh

Thank you for all your help! I was able to solve it by also adding a resize_wrapper around the datatable and it now works as I wanted.

http://live.datatables.net/visageho/29/edit

/Isabel