Many tables generated by wikitext are bigger than 320px. On a 320px screen, this causes the entire viewport to grow to the size of the table and can break the experience of the entire site. This stretches the search bar and makes the mobile site very unusable.
Current solution (hack)
Currently the mobile site deals with this situation by forcing the table to have width 100% and adding overflow scrolling (which is enabled by making the table a block element). This solution is not perfect as overflow-x is not fully supported across all mobile devices. To see an example of the sort of table this rule targets the table on the presidental election results page  provides a good example.
Side note: We may also want to make it possible for templates in the short term to opt out of the styling hack e.g. using a nohacks class
Long term solution
Ideally it should be possible for templates to define their own behaviour for tables on mobile devices.
There are various responsive tables  techniques but there is no one fit for all solution. Note some tables  do not even scale well on even desktop devices.
It should be possible for template editors to use media queries to style tables differently with the closure of the templating RFC  so that we can kill this table hack.
Other solutions are welcomed.
See T66516: table width is marked !important and T38936: Tables in mobile