> What's broken with table layouts on mobile? I just tested my code above on Safari on iOS 10 and it displayed as expected.

Depends what you'd expect, I suppose. These days, I'd expect the columns to switch to a vertical stacking layout when viewed at a mobile width. I guess maybe it's not "broken", per se, but it's not responsive and certainly pretty limited in how it can be used.

What stops you from declaring

   table { display:block; }

etc. if you need to transform your table into vertical flow layout?

Or even...

.responsive { display: block }

@media(min-size: 768px) { . responsive { display: table }}