Table width seems always set at 100%

Table width seems always set at 100%

Loren MaxwellLoren Maxwell Posts: 382Questions: 93Answers: 10
edited January 2018 in DataTables 1.10

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?

This question has an accepted answers - jump to answer

Answers

  • allanallan Posts: 61,446Questions: 1Answers: 10,054 Site admin

    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 MaxwellLoren Maxwell Posts: 382Questions: 93Answers: 10

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

    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.

  • allanallan Posts: 61,446Questions: 1Answers: 10,054 Site admin

    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 MaxwellLoren Maxwell Posts: 382Questions: 93Answers: 10

    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.

  • allanallan Posts: 61,446Questions: 1Answers: 10,054 Site admin
    Answer ✓

    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 MaxwellLoren Maxwell Posts: 382Questions: 93Answers: 10

    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.

This discussion has been closed.