Column Width / Awkward Breaks

  • I’ve built a page that includes a large number of simple 4-column tables, each of which includes a column for star ratings and a column for phone numbers:
    https://devel.meadowbrookbrighton.org/resources/need-a-contractor/

    A few browsers display each table with four equal column widths. While that rigidity may not be a good idea in most circumstances, in this case it works well, as the star ratings and phone numbers don’t break awkwardly.
    (On MacOS, both Firefox and Chrome handle it this way.)

    Most browsers, however, are choosing to render the cell/column widths flexibly — too flexibly for my taste, as they allow the phone numbers and star ratings to break awkwardly.
    (On MacOS, Safari handles it this way, and on iOS all browsers handle it this way (probably because they’re all forced to use webkit).)

    So…
    Given the constraints that you have (including other users with other needs) and the tools that I have (CSS), can you suggest a way for me to improve the way this page renders for my visitors?

    Thanks in advance for your help,
    Jim

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

Viewing 5 replies - 1 through 5 (of 5 total)
  • Thread Starter jameslkane

    (@jameslkane)

    When I described my problem a few days ago and provided a link, I was working on a “devel” version of the site I was developing. That site went live tonight, so the page in question is now at this URL:
    https://meadowbrookbrighton.org/resources/need-a-contractor/

    Still hoping that you can help me!

    Thread Starter jameslkane

    (@jameslkane)

    In unrelated news…
    The page I’ve been working on loaded 34 small tables, which turned out in my testing to be just too resource-intensive for some phones, so I’ve now broken it into three pages, the first of which is here:
    https://meadowbrookbrighton.org/resources/need-a-contractor-1

    Still hoping for help with the original problem!

    Plugin Author Imtiaz Rayhan

    (@imtiazrayhan)

    Hi @jameslkane,

    Thanks for the updates.

    We will look into it.

    Regards.

    Thread Starter jameslkane

    (@jameslkane)

    Thanks for checking in, Imtiaz!

    Thread Starter jameslkane

    (@jameslkane)

    Well, it’s been over two weeks since my initial posting, with no helpful response at all, so I’ve resorted to a brute force solution: I’ve just set td {width: 25% !important;} on the pages with these 4-column tables. It’s not an optimal solution or a robust one, but for the short-term it eliminates the awkward breaks.

    Imtiaz:
    If you’d like to see the problem, just use your browser’s inspector and disable that call-out. I would still welcome a more optimal, more robust solution.

Viewing 5 replies - 1 through 5 (of 5 total)
  • The topic ‘Column Width / Awkward Breaks’ is closed to new replies.