CSS Table is disappearing on webpage when zooming in on page

Brandon Chin 1 Reputation point
2020-08-25T14:07:28.97+00:00

I am currently trying to handle our table disappearing when we zoom into the webpage. The horizontal scroll bar appears when zooming in which is expected, and the table remains up to 250% when in full screen, but any further zooming and the table disappears. I assume that this has to do with a media query, but it seems that our media queries all have overflow = auto. Just trying to understand this issue, so that I can fix it properly.

I need the table remain displayed until 400%. I think the best way is to maintain the horizontal scroll ball, but I am open to suggestions on this as well. Main goal at the moment is the fact the table is disappearing and there does not seem to be an obvious reason for that to be the case. I am wondering if the table is simply too large for the page, and that this is expected, and I need to handle it as such.

I would appreciate any help on this issue.

Table at 250%:
20301-image.png

Table at 300%:
20266-image.png

Azure App Service
Azure App Service
Azure App Service is a service used to create and deploy scalable, mission-critical web apps.
7,663 questions

1 answer

Sort by: Most helpful
Most helpful Newest Oldest
  1. ajkuma 25,781 Reputation points Microsoft Employee
    2020-08-31T17:39:41.967+00:00

    To update the community.
    Brandon and I had a discussion this -The configuration had bad file management (with how media queries should work with table creation), and too many media queries resulted in the confusion. The display was ‘none’ when it should have been ‘block’, and it was ‘block’ when it is was not essential, refining this configuration helped.

    0 comments

Your answer

Answers can be marked as Accepted Answers by the question author, which helps users to know the answer solved the author's problem.