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

Asked

Viewed 381 times

3

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

Expected: inserir a descrição da imagem aqui

Upshot: inserir a descrição da imagem aqui

When resizing the screen, the browser calculates the width of each td adjusting its width to contain the content and at the same time not to burst the total width of the screen (or the element in which it is inserted) until the moment it is no longer possible to break the content in several lines and the table exceeds the width of the parent element.

However, in the new version, Chrome stops considering the width of the parent element earlier than expected. Analyzing the example of the result obtained, it can be noticed that it is still possible to break the contents of column 3 in rows, that is, to decrease the width of the same so that it is not necessary to use the scroll.

Jsfiddle of the table.

So far, the only way I’ve found to get around this problem is to set the width of tds to 1%. However, in this way, all tds are the same size, regardless of their content. Set the width of each td would also be unviable.

Someone has a solution to the problem?

css google-chrome table

3 answers

4


1

I couldn’t emulate your mistake, so I can’t guarantee that this answer will help.

Working with Viewport

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

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

This tag informs the browser that the viewport is the user screen size and the initial scale is 1.

Using viewport relative size unit (vw and vh)

vw and vh are new units in the CSS3 which is based on the size of the viewport.

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

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

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

Follows the example of Jsfiddle

  • Have you tested for Chrome in the updated version (v44)? Although your approach is interesting the class table-responsive is usually used in a very generic way and must respect the width of the parent element which is not always (in my case never) the size of the viewport...

  • Tested, did not present the error for me, worked?

  • You need to resize the screen until the problem happens. Chrome behaves correctly to some extent... =)

-2

Take a look at that link and see if it helps you:

http://leomiranda.com/desenvolvimento/10-controlando-quebras-de-linhas-pelo-css

your <td> are by default with the initial, but this does not make mode on it readjust the table according to the page size.

if the link breaks:

here is the explanation

Tag White-Space

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

Valor Description
normal White spaces 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 tag is found <br>
pre White spaces will be preserved by the browser.
pre-line Whitespace will be ignored by the browser and the text will be broken when necessary.
pre-wrap Whitespace will be preserved by the browser and the text will be broken when needed.
inherit Will be inherited the characteristics of the parent element.

The best is to test and see the results. Example of use:

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

Tag Display

Another interesting way to manipulate the line break or not of an element is to use the tag display. When we use the div tag we realize that automatically there is 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}

  • There is a link to Jsfiddle. Adding directly to the question will not clarify anything, as it is only the table code with basic styles. It would just pollute the same...

  • I saw the code link, Sorry. Your problem is that on your page the <td> do not break the correct line?

  • the <white-space: nowrap> - command does not break line at all. to allow line breakVoce can use <white-space: nowrap:pre>

  • I’m using white-space: nowrap only in the header. All tds of the table body are with the initial value.

  • good beauty that helped.

Browser other questions tagged css google-chrome table

You are not signed in. Login or sign up in order to post.