Welcome to the Question2Answer Q&A. There's also a demo if you just want to try it out.
+1 vote
270 views
in Q2A Core by
by
+1
There is no good solution to support mobile friendly HTML tables. The best thing I found is to add scroll option in the CSS so that if the width of table is larger, it'll just scroll.

3 Answers

–1 vote
by
Table is a pain. You should look for some solutions elsewhere to make table responsive on mobile. Bear in mind that by default, DIV tags will be truncated by Q2A  HtmLawed.php
0 votes
by
how did you resolve it?
0 votes
by
edited by

Hey,

I have solved this error in my site. You can check [Link].

How to Solve Table out of Frame issue in Question2Answer?

Here is the solution for this issue. It just need to add 2-3 CSS code [ first to convert it to block, then automate overflow in x direction using overflow-x:auto; ].

  1. Just inspect the table CSS and find out what is the number of line of CSS file. Or, simply go to the CSS file of your site and find out table selector.
  2. You can also find the line. Firstly, right click on table...then click on inspect and then find <table> code and click on it, so that corresponding CSS will also be show. Then, find the number of line of table selector.. In my case, table selector is located in qa-styles.css and in line number 197.
  3. Just go the CSS style  file (in my case is qa-style.css) and find number of line where table selector is written (197 in my case).
  4. Then, Replace the CSS with this one.
  5. table {
        border-collapse: collapse;
        max-width: 100%;
        display: block !important;
        overflow-x: auto !important;
        width: 100% !important;
    }
  6. I would like to mention that either replace the whole table sector code with the above code or just add below CSS code in previous code.
  7. display: block !important;
    overflow-x: auto !important;
    width: 100% !important;
  8. In the end, your table selector CSS code should look like the below one.
  9. Now, save your code and clear your cache.

You can check using incognito tab in Chrome or private tab in Mozilla.

Your problem will be solved. ;-)

...