Page 1 of 1

Table display differs between Firefox & Chrome

Posted: Thu Sep 12, 2019 6:49 am
by bobinski
I have added a table to an article. The html Joomla! generates is :-

Code: Select all

<div itemprop="articleBody">
		<table style="height: 99px; width: 891px;">
<tbody>
<tr>
<td style="width: 275.033px;">This site</td>
<td style="width: 180.967px;">Original Site</td>
</tr>
<tr>
<td style="width: 275.033px;"><a href="/5G/bioinitiative-report-2012-summary-highlights.pdf?download" target="_blank" rel="noopener noreferrer">BioInitiative report 2012 - summary highlights</a></td>
<td style="width: 180.967px;"><a href="https://michaelhollihn.files.wordpress.com/2013/01/bioinitiative-report-2012-summary-highlights.pdf" target="_blank" rel="noopener noreferrer">michaelhollihn.files.wordpress.com</a></td>
</tr>
<tr>
<td style="width: 275.033px;"><a href="/5G/peer-reviewed-scientific-studies-on-emf-related-subjects.docx?download" target="_blank" rel="noopener noreferrer">Peer-reviewed scientific studies on EMF related subjects</a></td>
<td style="width: 180.967px;"><a href="https://www.powerwatch.org.uk/science/studies.asp" target="_blank" rel="noopener noreferrer">www.powerwatch.org.uk</a></td>
</tr>
<tr>
<td style="width: 275.033px;"> </td>
<td style="width: 180.967px;"> </td>
</tr>
</tbody>
</table> 	</div>
The css from the protostar template (line: 1694) :-

Code: Select all

table {
	max-width: 100%;
	background-color: transparent;
	border-collapse: collapse;
	border-spacing: 0;
}
.table {
	width: 100%;
	margin-bottom: 18px;
}
In Firefox the table is correctly constrained to the width of the articleBody but in Chrome it is not.

Does anyone know of a work round for this Chrome failure to action width: 100% on a table?

Re: Table display differs between Firefox & Chrome

Posted: Thu Sep 12, 2019 6:52 am
by bobinski
I'm on Version 76.0.3809.132 (Official Build) (64-bit), but when I went to the About Chrome window it went to updating.

Now it's updated and relaunched to Version 77.0.3865.75 (Official Build) (64-bit) it's working!

Re: Table display differs between Firefox & Chrome

Posted: Thu Sep 12, 2019 7:13 am
by gws
Try using % instead of px for width definitions.i.e. <td style="width: 33%;">
Infinitely better to use <div> instead of tables if you can as tables are not truly responsive.
edit, I see you have a solution....