Support » Plugin: TablePress » Fixed Table and Horizontal Scroll

  • Resolved m4op3rator

    (@m4op3rator)


    Hi Tobias, been enjoing the plugin a lot as it allows me to learn CSS doing basic things.

    I had hoped I could make all my columns the same width
    so I used the table-layout: fixed;

    ((See sample page and then click on the models tab to see table))

    but that made the horizontal scroll dissapear when the table gets smaller.

    I know I am doing something counterintuitive here, but I am new at this.
    Any solution to have same width columns and also have the horizontal scroll happen for smaller screens?

    • This topic was modified 8 months ago by m4op3rator.
    • This topic was modified 8 months ago by m4op3rator.

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

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

    (@tobiasbg)

    Hi,

    thanks for your post, and sorry for the trouble.

    Setting table-layout: fixed; will very often lead to problems. I suggest to not do that. Instead, you could try setting column widths with CSS, e.g. via https://tablepress.org/faq/column-widths/

    Regards,
    Tobias

    m4op3rator

    (@m4op3rator)

    OK I will give that a try.
    How about making the corners of the outside of all tables with a radius.
    I can’t believe I can’t get it to work.
    I tried

    table {
    border-radius: 5px;
    }

    Let me know please.

    Plugin Author TobiasBg

    (@tobiasbg)

    Hi,

    you’ll have to apply these round corners to the corner cells and not the table itself, e.g.

    .tablepress thead th:first-child {
      border-top-left-radius: 10px;
    }
    .tablepress thead th:last-child {
      border-top-right-radius: 10px;
    }
    .tablepress tbody tr:last-child td:first-child {
      border-bottom-left-radius: 10px;
    }
    .tablepress tbody tr:last-child td:last-child {
      border-bottom-right-radius: 10px;
    }
    m4op3rator

    (@m4op3rator)

    Thank you sir, it makes sense but doesn’t seem to effect the tables yet.

    Plugin Author TobiasBg

    (@tobiasbg)

    Hi,

    I don’t see this CSS code in the TablePress “Custom CSS” on that page?

    Regards,
    Tobias

    m4op3rator

    (@m4op3rator)

    Hi, could you help me tighten up the corners still?
    I see it is trying to round, but still has square borders overtop of the cells.

    Plugin Author TobiasBg

    (@tobiasbg)

    Hi,

    in the definition of your borders, you should remove all CSS selectors, except

    .tablepress tbody td
    

    Regards,
    Tobias

Viewing 7 replies - 1 through 7 (of 7 total)
  • The topic ‘Fixed Table and Horizontal Scroll’ is closed to new replies.