HTML/CSS: table font size different in mobile device

You need to consider setting the viewport of your application. To make a mobile-friendly web application, you will need to set this in your headers. You can do so by adding a <meta> tag between your <head> tags. Here is an example:

<head>
    <meta name="viewport" content="width=device-width, initial-scale=1">
</head>

For a full description of what a viewport is and how it is used, you can visit the article Configuring the Viewport from Apple Developer as it was first introduced for Safari Mobile.


Eventually you might also need

text-size-adjust: none;
-webkit-text-size-adjust: none;

to make sure that text is not renderred bigger or smaller depending on the size of table cells. Especially in Safari on iOS I found this to be relevant.