Joan M Ответов: 1

Становится другой шрифт в предварительно обернуть текст в таблице при выводе на Андроид

Всем привет,

В PHP-приложении для контроля моего рабочего времени я заполняю таблицу значениями базы данных. В одном столбце таблицы хранится описание работы, которую я выполнил за определенный период.
этот текст состоит из нескольких строк, и я хочу, чтобы таблица показывала его с сохранением разрывов строк.

Для этого я использую этот 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 */
}


Это влияет на всю таблицу, поэтому не должно быть другого поведения между столбцами.

Но другие столбцы показывают нормальный размер буквы/вес... а столбец со значениями с разрывами строк, поступающими из базы данных, показывает другой размер шрифта при рендеринге страницы в моем телефоне Android.

Любопытно, что никаких специальных классов или стилей не применялось...

Какой-нибудь намек?

Изменение шрифтов не помогает,...

Что я уже пробовал:

Поиск в интернете, пытаясь применить различные шрифты и CSS...

Richard Deeming

Щелкните правой кнопкой мыши на элементе и проверьте вычисленный стиль. Инструменты разработчика Вашего браузера должны показать вам, откуда берется применяемый стиль.

Joan M

В ПК я вижу единственное отличие в том, что этот столбец имеет встроенную перезапись стиля, которая заключается в следующем: кроме этого, ничто другое не отличается от других столбцов.
Конечно, я пробовал удалить и это тоже, никакой разницы.
Возможно, браузер android не обновляет CSS...

Joan M

Во всяком случае, разница видна только в Android... там я не знаю, как использовать инструменты разработчика...

Richard Deeming

Удаленная отладка - инструменты разработчика Firefox | MDN[^]

1 Ответов

Рейтинг:
0

Andre Oosthuizen

Некоторое время назад у меня была похожая проблема, на любом умном устройстве таблицы не отображаются должным образом, я решил сложить каждый столбец для каждой строки, и это было намного удобнее для пользователя. Не уверен, что это то, что вам нужно, хотя любой большой текст, содержащийся в столбце, автоматически оборачивается внутри столбца?

@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;
		}
}