Display:Block not working in Chrome or Safari

Question

I have a simple need to display the cells of a table row vertically. This works just fine in FF, but not in Chrome or Safari on the Ipad.

The example below renders a

Answer 1

I've did a trick with using th's instead of td. And a css hack wich only applies on safari (not webkit general).

HTML:

    

        
Cell 1
 
        
Cell 2
    

CSS:

table {
    width: 100%;
    text-align: left;
}

/* Safari 7.1+ */
_::-webkit-full-page-media, _:future, :root .safari_only {
    .safari-fix table tr {
        display: block;
        width: 100%;
    }
}
/* Safari 10.1+ */
@media not all and (min-resolution:.001dpcm) { 
    @media {
        .safari-fix table tr {
            display: block;
            width: 100%;
        }
    }
}

table th {
    width: 100%;
    display: block;
}

Here is my jsfiddle