Scroll Bar and Force Column Width

  • Resolved cblakeslee

    (@cblakeslee)


    4 years, 6 months ago

    I need people to have the option to print a table with the URL visible. My solution was to put the “print” link in the last column but to have that column off of the page so you had to scroll to see it. That way it does not complicate the table. No matter what I try I cannot force the width on the other columns and it automatically squished the “Mission” column which makes the table unusable. I’ve tried the TablePress Extension: Responsive Tables but, to use that I have to turn off the “Use DataTables” and then my export buttons no longer work and I do not have search, sort, or show entries features.

    Page short code [table id=7 datatables_buttons=”copy,csv,excel,pdf,print” /]

    Custom CSS

    button.dt-button {
    background-image: none;
    background-color: #6b819b;
    color: #eeeeee !important;
    }

    button.dt-button:hover:not(.disabled) {
    background-image: none;
    background-color: #b54747;
    color: #111111 !important;
    }

    .tablepress-id-7 .column-2,
    .tablepress-id-7 .column-3,
    {
    width: 300px !important;
    }

    Any suggestions?

    The page I need help with: [log in to see the link]

Viewing 3 replies - 1 through 3 (of 3 total)
  • Plugin Author TobiasBg

    (@tobiasbg)

    Hi,

    thanks for your question, and sorry for the trouble.

    Getting the widths changed here, in order to forcefully hide a column, will be rather complicated. It will just not look right on big and smalls screens ??

    Instead, you could maybe use the browser’s regular print function (not the DataTables Buttons), and add this to the “Custom CSS” textarea on the “Plugin Options” screen of TablePress:

    @media print {
  .tablepress a::after{
    content: " (" attr(href) ") ";
  }
}

    With this, when printing via the browser, the URL of the links in the table will be automatically appended after them.

    Another CSS approach, if you want to use the DataTables Buttons Print button, and an extra column, would be this “Custom CSS”:

    .tablepress-id-7 .column-6 {
    display: none;
}
@media print {
    .tablepress-id-7 .column-6 {
        display: table-cell;
    }
}

    This will essentially hide that column and only show it when printing.

    Regards,
    Tobias

    Thread Starter cblakeslee

    (@cblakeslee)

    You are amazing! I used the second option and it works perfectly. Thank you!

    Plugin Author TobiasBg

    (@tobiasbg)

    Hi,

    no problem, you are very welcome! ?? Good to hear that this helped!

    Best wishes,
    Tobias

    P.S.: In case you haven’t, please rate TablePress here in the plugin directory. Thanks!

Viewing 3 replies - 1 through 3 (of 3 total)
  • The topic ‘Scroll Bar and Force Column Width’ is closed to new replies.