[Mupa]

Please have a look on http://www.tennis-grossraeschen.de/ergebnisse/ergebnisse-der-sommersaison-2016/ with a smartphone in portrait mode.

On this page i have a table which is correctly rendered so far. But for some reason i have a horizontal scrolling bar which makes controlling the page a little bit “spongy”. Is this cause the table has too much informations and is to wide for a smartphone in portrait mode? I thought every table will be rendered to the maximum width of it’s outer div.

[Mahesh]

@mupa: Yes, that is because you have too much information in the table data. The table does automatically render to the maximum width according to the content / maximum word length (Considers the word breaks). For example: If you have content in a td say:
This is a book
Then this will be displayed as:

This
is a 
book

But if you have content with long word say:
Tomorrow is holiday.
Then this will be displayed as:

Tomorrow
is holiday

td’s width is automatically defined by length of the longest word.
Hope you understand.
However you can reduce font size to overcome the problem

@media screen and (max-width: 480px) {
    td {
        font-size: 10px;
    }
    th {
        font-size: 11px;
    }
}

Regards,
Mahesh

[Mupa]

Thanks for the explanations, i expected something like that. I already have reduced my table font but it was not enough. Now with th, td = 10px it looks perfect.

[Mahesh]

@mupa: Glad to know you made it work. Have a nice day.

Regards,
Mahesh

[Author]

Posts