Responsive Tables

  • Resolved costind

    (@costind)


    5 years, 2 months ago

    The first line of my table reads: –

    <table style=”width: 100%; height: 171px; border-collapse: collapse;”>

    The problem is that on a mobile, it doesn’t collapse!

    Regards

    David

Viewing 4 replies - 1 through 4 (of 4 total)
  • Plugin Author Andrew Ozz

    (@azaozz)

    You mean it shows borders around the individual table cells instead of “merging” them? More info about border-collapse: https://developer.mozilla.org/en-US/docs/Web/CSS/border-collapse.

    Thread Starter costind

    (@costind)

    Thank you for your reply.

    No this is not the problem. Perhaps I should have said that the table does not resize when viewed on a smartphone.

    Regards

    David

    Plugin Author Andrew Ozz

    (@azaozz)

    the table does not resize when viewed on a smartphone

    Generally tables in HTML are not “responsive”. If you have style="width: 100%" (this is the default when inserting new table) in the table tag, it should scale the width, but that may make the cells too narrow to properly display the data, or may fail if there are other elements with specific widths inside the cells.

    There are some ways to improve the responsiveness of HTML tables. They are done by moving cells with CSS and best implemented by your theme. Still, the tables may get confusing when that happens.

    For best results only tables with 2-3 columns should be used and there should only be text in them. If there are images or other elements with fixed widths, they may “push” the table over the page width.

    Thread Starter costind

    (@costind)

    Many thanks for your advice.

    Regards

    David

Viewing 4 replies - 1 through 4 (of 4 total)
  • The topic ‘Responsive Tables’ is closed to new replies.