B7th B7th - 9 days ago 6
CSS Question

Css Semantic UI responsive table won't collapse properly in Safari

I am currently using Semantic UI's tables, which are supposed to be mobile-responsive (example and description here http://semantic-ui.com/collections/table.html)

My only problem is having apparently the same settings, Safari and Chrome will present mobile version of tables, on my website, in strangest ways, but definitely not blocks as in normally in their website.

I have added normalize.css but it seems to not work for this issue.

Am I missing something?

Answer

The issue was not one with Semantic UI, but one with Webkit.

Webkit overrides display: block; and computes it to be display: table-cell; in a td when there is no <!DOCTYPE html> declared for your html.

Source: Display:Block not working in Chrome or Safari