Chrome [v44] - Bug on tables inside a div with overflow

Navigation
3

In the new version of Chrome (version 44) the tables are not behaving in the same way that the other versions of the table behaved.

Expected:

Result:

Whenyouresizethescreen,thebrowsercalculatesthewidthofeachtdbyadjustingitswidthtocontainthecontentandatthesametimedoesnotburstthefullwidthofthescreen(ortheelementitisinserted)towhenitisnolongerpossibletobreakcontentacrossmultiplerowsandthetableexceedsthewidthoftheparentelement.

However,inthenewversion,chromestopsconsideringthewidthoftheparentelementearlierthanexpected.Byanalyzingtheexampleoftheresultobtained,itispossibletorealizethatitisstillpossibletobreakthecontentsofcolumn3inlines,thatis,toreducethewidthofthesameonesothatitisnotnecessarytousethescroll.

Table JSFiddle.

So far, the only way I've found to work around this problem is to set the width of td s to 1% . However, in this way, all% s of% s are of the same size, regardless of their content. Setting the width of each td would also be impractical.

Does anyone have a solution to the problem?

    
asked by anonymous 24.07.2015 / 20:29

3 answers

4

This is a known and reported bug:

link

The merge for the project's main trunk has already been requested.

    
24.07.2015 / 22:23
1

I could not emulate your mistake, so I can not guarantee that this answer will help.

Working with Viewport

You must enter the meta tag viewport in <head> of your document 

<meta name="viewport" content="width=device-width, initial-scale=1.0">'

This tag tells the browser that the viewport is the size of the user's screen and the initial scale is 1.

Using unit of relative size of viewport (vw and vh)

vw and vh are new units in CSS3 that are based on viewport size.

1vw - returns 1% of the width of the viewport < 1vh - returns 1% of the height of the viewport

Since 1vw represents 1% of the size of the viewport, setting max-width to 100vw the table will have 100% of the viewport, so you could add that tag in .table-responsive , which would look like this: 

.table-responsive {
    border: 1px solid #ddd;
    margin: 20px;
    overflow: auto;
    max-width: 100vw;
}

Follow the example of JSfiddle

    
24.07.2015 / 23:02
-2

Take a look at this link and see if it helps:

link

Its <td> is by default with the initial, however that does not make it on it resets the table according to page size.

if the link breaks:

Here's the explanation

White-Space Tag

The first one is responsible for the treatment of whitespace, the White-Space tag, this tag can be used as follows:

Value Description
normal White space will be ignored by the browser. nowrap The text will be presented all of it in a single line on the screen. There is no line break until a <br> tag is found
pre The white space will be preserved by the browser. Pre-line Blanks will be ignored by the browser and the text will be broken when needed. pre-wrap Blanks will be preserved by the browser and the text will be broken when needed. inherit The inheritance of the parent element will be inherited.

The best thing is to test and see the results. Example usage: 

{codecitation}elemento { white-space: normal; }{/codecitation}

Tag Display

Another interesting way to handle a line break or not an element is to use the display tag. When we use the div tag we realize that there is automatically a line break while a span does not happen. We can say that in the div tag is included the display: block property while the span is the display: in-line. 

{codecitation}elemento { display: block; // quebra de linha }

elemento { display: inline; // sem quebra de linha }{/codecitation}
    
24.07.2015 / 21:12
How to identify the type of request sent to the server? How can I add elements in a multidimensional array?