I would like to have a simple website that works both on desktop and mobile browser, and encountered a weird (rookie) problem: when I have a table whose column texts are of diff
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.
try this
body {
font-family: Verdana, Geneva, Arial, sans-serif;
font-size: 15px;
}