Getting different font in pre-wrap text in a table when rendered in android

Question

0.00/5 (No votes)

See more:

Hi all,

In a PHP application to control my worked hours, I'm populating a table with database values. One column in the table stores the description of the work I did during a period.
that text has multiple lines and I want the table to show it maintaining the line breaks.

To do so I am using this CSS:

CSS

table.tBase {
  font: 12pt Arial, Helvetica, sans-serif;
  border-collapse: collapse;
  width: 100%;
  border-collapse: 1;
  margin-bottom: 12px;
  white-space: pre-wrap !important; /* <-- THIS ONE */
}

This affects all the table, so it should not be a different behavior between columns.

But other columns show a normal letter size/weight... and the column with the values with line breaks coming from the database shows a different font size when rendering the page in my android phone.

Curiously no special class or styles applied...

Any hint?

Changing fonts is not helping, ...

What I have tried:

Searching the internet, trying to apply different fonts and CSS...

Posted 9-Jul-20 1:10am

Joan M

Updated 9-Jul-20 16:59pm

Add a Solution

Comments

Richard Deeming 9-Jul-20 9:55am

Right-click on the element and inspect the computed style. Your browser's developer tools should show you where the applied style is coming from.

Joan M 9-Jul-20 10:38am

In the PC, I can see the only difference is that this column has an inline style overwrite which is: apart of that nothing else is different than the other columns.
Of course I've tried removing this too, no difference at all.
Maybe the android browser is not refreshing the CSS...

Joan M 9-Jul-20 10:50am

Anyway the difference is only visible in Android... there I don't know how to use the developer tools...

Richard Deeming 9-Jul-20 10:53am

Remote Debugging - Firefox Developer Tools | MDN[^]

1 solution

Add a Solution

Add your solution here

Treat my content as plain text, not as HTML

Preview 0

…

Existing Members

Sign in to your account

...or Join us

Download, Vote, Comment, Publish.

Your Email
Password
Forgot your password?

Your Email
This email is in use. Do you need your password?
Optional Password

I have read and agree to the Terms of Service and Privacy Policy
Please subscribe me to the CodeProject newsletters

When answering a question please:

Read the question carefully.
Understand that English isn't everyone's first language so be lenient of bad spelling and grammar.
If a question is poorly phrased then either ask for clarification, ignore it, or edit the question and fix the problem. Insults are not welcome.
Don't tell someone to read the manual. Chances are they have and don't get it. Provide an answer or move on to the next question.

Let's work to help developers, not make them feel stupid.

This content, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)

Andre Oosthuizen · Answer 1 · 2020-07-09T16:59:00

I had a similar problem a while ago, on any smart device, tables does not show properly, I decided to stack each column for each row and it was way more user friendly. Not sure if this is what you require though, any large text contained in a column is wrapped automatically inside the column?

CSS

@media only screen and (max-width: 760px), (min-device-width: 768px) and (max-device-width: 1024px) {
	table.fixedHeader-floating {
		display: none
	}

	.panel h2 {
		font-size: 12px;
		font-weight: 300;
	}
	
	/* Force table to not be like tables anymore */
	.panel .myTablename thead, tbody, th, td, tr {
		display: block;
	}

	/* Hide table headers (but not display: none;, for accessibility) */
	.panel .myTablename thead tr {
		position: absolute;
		top: -9999px;
		left: -9999px;
	}

	.panel .myTablename tr {
		border: 1px solid #ff6a00;
	}

	.panel .myTablename td {
		/* Behave  like a "row" */
		border: none;
		border-bottom: 1px solid #ff6a00;
		position: relative;
		padding-left: 1%;
	}

		.panel .myTablename td:before {
			/* Now like a table header */
			position: absolute;
			/* Top/left values mimic padding */
			top: 6px;
			left: 6px;
			width: 98%;
			padding-right: 10px;
			white-space: nowrap;
		}
}