CODEWITHSUNDEEP
google-chromehtml-table
americanninja
americanninja

Reputation: 31

HTML Tables break layout with latest Chrome Browser 44.0.2403.89

I came across a strange one today, which actually wasted a lot of my time, as I first thought it was some module that I upgraded on Drupal or some code change. In fact, it is related to Google Chrome's browser update.

Currently Google Chrome's latest version is 44.0.2403.89. The previous version I was running was 43.0.2357.132. Tables on my site were displaying just fine. And actually, after hours of troubleshooting, I thought to just check the website with Safari and sure enough things were displaying as they always have. Then I checked Firefox, also no problem and displayed as it had. So it seems Google has changed something in Chrome to cause tables to break. Any idea what's going on and how I can fix it, or is this a bug with the latest Chrome version?

Here is a sample of the table being broken by Chrome:

http://www.yoninja.com/jp/browse/results/taxonomy%3A74

See how the middle column's table flows under the right side bar. If you check this page with the previous version of Chrome (43.0.2357.132), it displays just fine. Also displays perfect in Safari and Firefox's latest version. What gives?!?

* UPDATE * So I have temporarily fixed it by using Drupal's View Theming and modifying the views-view-table--(viewname).tpl.php file and editing the column width of the column which holds the long text. Even specifying the table width, whether with 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%;">

Neither of these work, specifying 100% doesn't change a thing. Specifying the width in pixels actually does change the width of the table but not the by the width you specify. Strange! Why would Google's update change the behavior of something that has already been working previously?

Anyway, the only way I have been able to get things working is by specifying the width of the column as mentioned below in one of the answers. However, I still feel this is unnecessary and it seems every other browser is still displaying tables properly. So the question is, will Google fix this?

Is there anyone I can get this working without having to specify the table width. I use this view in various pages, and I don't want to have to worry about specifying the width.

Upvotes: 3

Views: 3610

Answers (4)

BP Harv
BP Harv

Reputation: 41

This has indeed been reported as a bug.

https://code.google.com/p/chromium/issues/detail?can=2&start=0&num=100&q=&colspec=ID%20Pri%20M%20Stars%20ReleaseBlock%20Cr%20Status%20Owner%20Summary%20OS%20Modified&groupby=&sort=&id=512872

This bug seems to apply to tables who's width has been specified but rely on automatic width calculations on individual table divisions with larger amounts of text in them. It miscalculates the width table divisions which contain larger amounts of texts. Affected rows now extend beyond the edge of the table visually breaking column alignment.

Until a valid update to Chrome fixes this, you can apply my earlier posted work around.

You'll need to manually specify the width of table divisions which contain large amounts of text in them (not the table itself). This will override the invalid calculation and prevent your table row from expanding beyond the width of the table.

I've tested this with an inline width specifier on table divisions with large amounts 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>

Upvotes: 4

Kevin Baragona
Kevin Baragona

Reputation: 118

I am having the same issue which broke our page layout.

However, I actually am using a fixed width CSS property on the table.

The width of the table is visibly larger than the width specified. (I.E., it overflows.)

Querying the width of the table with JS returns the CSS width set, not the real width.

Upvotes: 0

Patti S
Patti S

Reputation: 1

After the Chrome 44.0.2403.89 update pages containing an html table with a style of width:100% (or using bootstrap table classes) no longer honor the 100% width if ANY of the columns contains a "long" string (even if the string includes spaces). This is new behavior and I've confirmed it is directly related to the 44 update. Hopefully if enough people post it will get fixed.

Upvotes: 0

BPPHarv
BPPHarv

Reputation: 1

I too have experienced this issue. It does indeed seem to be an update from 43 to 44 that changed the layout behavior. My site used the automatic layout to re-size the width which no longer works well. The fix for our site was to set one of the larger text fields width with an inline width element on the table division.

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>

Upvotes: 0

Related Questions