Table width seems always set at 100%

Loren Maxwell

I've noticed that when I create a normal DataTable then the columns are stretched to fill the width of the container, but when I add Scroller then the columns have their natural width and I can adjust that with a class.

Here's an example of some tables both with and without the Scroller:
http://ghsfha.org/w/Special:SchoolHome?view=seasons&season=2016&school=Roswell

Compare the "2016 Roswell Hornets results" with the "All-State players".

I'd like to get the column widths the Scroller offers in a normal table unless I specify "width=100%".

Is it something I'm doing?

allan

When scrolling is enabled, you need to use 100% width I'm afraid. I did attempt to allow it to work without 100% before, but I never managed to nail the behaviour down - something always rendered incorrectly.

If you want a smaller width when scrolling you need to make the container smaller.

Allan

Loren Maxwell

Thanks, @allan, but I was hoping for the other way around

In other words, how can I get tables to look like the Scroller when I'm not using the Scroller?

I like that I have more control over the column widths with the Scroller enabled, but I'm not always wanting the Scroller effect.

allan

how can I get tables to look like the Scroller when I'm not using the Scroller?

I'm afraid I don't quote understand. Could you elaborate on that, based on the page you linked to above?

Allan

Loren Maxwell

If we look at the two table of "2016 Roswell Hornets results" and the "All-State players".

On the All-State players (Scroller enabled) the table proper doesn't expand the same width as the scroll_body div, leaving the stripped portion on the right.

What I like about this particular example is that I have complete control over the column widths.

At the top of the page under the "2016 Roswell Hornets results", the table proper takes the entire width of the div, which gives me less control over individual columns widths.

What I'd like is to have the Scoller enabled look (table with the diagonal-stripped portion to the right) but without necessarily needing the Scroller itself enabled.

Or really I'm not necessarily looking to get the diagonal stripped portion, I'm just looking for a table to not automatically take up the full width of the parent div so that I can have full control over the column widths.

allan

The CSS on your page (from datatables.min.css) has:

table.dataTable {
    width: 100%;
    ...
}

which is where that 100% width is coming from. You'd need to add style="width:auto;" or similar your table.

If you want the diagonal stripes for the non-Scroller table you'd need to do something like this for the regular container.

Allan

Loren Maxwell

Ah, got it.

How simple!

It looks like the CSS is used by DataTables to insert an actual width, so I was focused on figuring out how to adjust it with a JS solution.