HTML tables break layout with latest Chrome browser 44.0.2403.89
Today I ran into a strange one that actually wasted a lot of time since I first thought it was some kind of module that I updated to Drupal or changed the code. In fact, this is due to the update of the Google Chrome browser.
Currently, the latest version of Google Chrome is 44.0.2403.89. The previous version I ran was 43.0.2357.132. The tables on my site displayed just fine. And in fact, after hours of troubleshooting, I decided to just check out the site with Safari, and of course everything was the same as always. Then I checked Firefox, also no problem and didn't show how it was. Looks like Google changed something in Chrome to make the tables break. Any idea what's going on and how can I fix it, or is this a bug with the latest version of Chrome?
Here's an example of a table broken by Chrome:
http://www.yoninja.com/jp/browse/results/taxonomy%3A74
See how the middle column column flows under the right sidebar. If you check this page with a previous version of Chrome (43.0.2357.132) it displays just fine. The perfect version of Safari and the latest Firefox is also displayed. What gives?!?
* UPDATE * So I fixed this temporarily with Drupal View Theming and changed the view-view-table - (viewname) .tpl.php file and edited the column width of the column that contains long text. Even specifying the width of the table, be it a percentage or a specific width in pixels, doesn't work in the latest Google Chrome.
<table class="<?php print $class; ?>"<?php print $attributes; ?> style="width:770px;">
<table class="<?php print $class; ?>"<?php print $attributes; ?> style="width:100%;">
None of these works, by specifying 100%, changes nothing. Specifying the width in pixels actually changes the width of the table, but not the width you specify. Strange! Why will Google update change the behavior of something that already worked before?
Anyway, the only way I was able to get it working was by specifying the column width as stated below in one of the answers. However, I still feel like this is unnecessary, and it seems like every other browser still renders tables correctly. So the question is, will Google fix this?
Is there anyone who gets it without specifying the table width. I use this view on different pages and I don't want to worry about specifying the width.
source to share
This has indeed been reported as a bug.
This error appears to apply to tables with specified widths, but is based on auto-width calculations for individual table sections with a lot of text in them. It calculates table width tables that contain more text. Affected rows now extend beyond the table border, visually disrupting column alignment.
Until a valid Chrome update is fixed, you can apply my previously posted work.
You will need to manually specify the width of the table sections that contain a lot of text (not the table itself). This will override the wrong calculation and prevent the table row from expanding beyond the table width.
I've tested this with the row width specifier in table divisions with a lot of text in them.
<table>
<tr>
<td>
some stuff
</td>
<td width='30%'>
some other large text field whose width isn't calculated properly
</td>
</tr>
</table>
source to share
I experienced this problem too. It seems to be an update from 43 to 44 that changed the behavior of the layout. My site was using auto layout to resize width, which no longer works well. The fix for our site was to set one of the large widths of the textboxes with a row width element in the table.
Your mileage may vary.
<table>
<tr>
<td>
some stuff
</td>
<td width='30%'>
some other large text field whose width isn't calculated properly
</td>
</tr>
</table>
source to share
After Chrome update 44.0.2403.89 pages containing html table with style width: 100% (or using bootstrap classes) no longer respect 100% width if ANY of the columns contains a "long" string (even if string contains spaces). This is new behavior and I have confirmed that it is directly related to update 44. Hopefully if enough people post it will be fixed.
source to share