Responsive data table not working in safari

I trying to get a simple responsive table on safari to work.

I'm trying to set all table elements to display:block on small screens so they will be stacked on top of each other.

@media only screen and (max-width: 760px)  {

    table, thead, tbody, th, td, tr {
        display: block;
    }

    td:empty {
      display: none;
    }

}

The technic is explained here.

I'm trying to get this simple jsbin to work and this is what I get: