CODEWITHSUNDEEP
iossafarihtml-tablemobile-safaricss-tables
blubberbo
blubberbo

Reputation: 4613

iOS Safari change <table> from display: table; to display: block;

I am experiencing an issue with <table> elements in Safari on iOS. I want to change a table to display:block; but I cannot seem to change it away from display: table;. I can debug it on a macbook pro I have and inspect the elements and the strange thing is, on a different site of mine I have a <table> that is display: block; and I can't change it, but then I have a different <table> (the one I would like to change) that is display: table; and I cannot get the style to override with display: block;. I have tried normal ways of overriding the css such as !important and it seems as though it should catch, but in the computed tab in Safari, it still will only show display: table;. I know that changing the <table> to display:block; will correct my issue, because my other table works correctly.

Does anyone have any experience with Safari overriding styles and what might be preventing me from changing the display property of the table?

Unfortunately, since the issue only occurs in iOS Safari (not in Chrome emulation), it is difficult for me to link to an example here.

Upvotes: 2

Views: 3208

Answers (1)

blubberbo
blubberbo

Reputation: 4613

In case anyone is interested - I tracked down this issue to be related to the -webkit safari uses.

It was broken and overriding my styles because the <!DOCTYPE html> was not corrected set on my html page.

This was due to a <script> tag that was located outside of my html and above the <!DOCTYPE html> declaration. Moving the <script> tag inside my html fixed the issue.

Upvotes: 8

Related Questions