is it possible to reduce the table width?

is it possible to reduce the table width?

veloopityveloopity Posts: 87Questions: 36Answers: 2

the datatables table looks good if set to 100% width in the table html tag, but sometimes there aren't so many columns and on a large screen, the data look a bit lost on such a wide table, so I'd prefer to set it to automatic width ... but when I comment out the 100%, the header and the data of the table get out of sync, and the resulting table is completely garbled.
Apparently this only happens when the table fits on the screen in its entirety and horizontal scrolling is not necessary - when I output the table on a narrow screen and horizontal scrolling is necessary, the table looks good.

This question has an accepted answers - jump to answer

Answers

  • allanallan Posts: 63,498Questions: 1Answers: 10,470 Site admin

    Can you link to a page showing the issue so it can be debugged please.

    Allan

  • veloopityveloopity Posts: 87Questions: 36Answers: 2

    URL/password sent via PM

  • allanallan Posts: 63,498Questions: 1Answers: 10,470 Site admin
    edited January 2016 Answer ✓

    Super - thanks for the login details.

    The issue comes from this CSS style:

    table.dataTable {
        margin: 0 auto;
        ...
    }
    

    which is in the DataTables stylesheet. The reason it doesn't appear to effect the header is that that element is wrapped in a container which has a specific width set, which the body element doesn't have.

    To fix try adding the following to your CSS:

    table.dataTable {
      margin: 0;
    }
    

    Allan

  • veloopityveloopity Posts: 87Questions: 36Answers: 2

    wonderful thank you !!

This discussion has been closed.