Fixed Table and Horizontal Scroll

  • Resolved m4op3rator

    (@m4op3rator)


    6 years, 6 months ago

    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 6 years, 6 months ago by m4op3rator.
    • This topic was modified 6 years, 6 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 Tobias Bäthge

    (@tobiasbg)

    6 years, 6 months ago

    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

    Thread Starter m4op3rator

    (@m4op3rator)

    6 years, 6 months ago

    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 Tobias Bäthge

    (@tobiasbg)

    6 years, 6 months ago

    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;
}
    Thread Starter m4op3rator

    (@m4op3rator)

    6 years, 6 months ago

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

    Plugin Author Tobias Bäthge

    (@tobiasbg)

    6 years, 6 months ago

    Hi,

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

    Regards,
    Tobias

    Thread Starter m4op3rator

    (@m4op3rator)

    6 years, 6 months ago

    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 Tobias Bäthge

    (@tobiasbg)

    6 years, 6 months ago

    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.