Media query not working on iOS - html

Question

I have been having problem with table not wanting to change (everything else scales as it should) responsively using media queries on iOS, it works perfectly on android phones and tablets, but not on iOS. I have tried adding viewport meta tag, but it doesn't help. Anyone know how to fix it?
Part of media query that doesn't work:
table, thead, tbody, th, td, tr {
display: block;
max-width:100%;
}
th{
display:none;
}
td {
border: none;
position: relative;
padding-left: 50%;
font-size: 1em;
background-color: #F6F7FB;
}
td:before {
position: absolute;
top: 6px;
left: 6px;
width: 45%;
padding-right: 10px;
white-space: nowrap;
line-height: 4em;
vertical-align: middle;
font-weight: bold;
}
td:nth-of-type(2):before { content: "test"; }
td:nth-of-type(3):before { content: "test"; }
td:nth-of-type(4):before { content: "test"; }
td:nth-of-type(5):before { content: "test"; }
td:nth-of-type(6):before { content: "test"; }
td:nth-of-type(7):before { content: "test"; }

Answer 1

I am not sure, but for me changing display of the isn't correct. Also the position relative/absolut in tables won't work in most cases. Is it possible for you, to change table structure to divs structure with display table and table-cell? I always do that, when need to make some big table responsive and there is no problem with that