Two divs with exactly the same attributes in chrome are displayed differently_html/css_WEB-ITnose

In chrome, as shown in the figure, in the third column of the table, the head will be opened by the text, but the content below will not


The two divs have exactly the same attributes, but one It will be stretched but the other one will not. I have uploaded the source code, a few js and html
http://115.com/file/c2kpg3hs#test.rar

Please help me take a look
Thank you.

Reply to discussion (solution)

Can't open rar file. . Help out. .

All set the same width

Oh rar please download from here
http://115.com/file/c2kpg3hs

All set the same width
The upper and lower tds are given the same height, and the width in style is 99px, but one will be stretched and the other will not

The problem lies in line 501 of table.js, table .el.css('width', '100%');

Your table is set to 100%, but the table inside is set with pixels

I downloaded it and saw it For a while, I can’t figure out why this happens, but the first table only has one row of data, and the second table has multiple pieces of data. And I took a look at the code and found that the first and second columns are fixed. :true, that is, adaptive. .

Could it be related to these reasons? .

But in fact, I think the poster raised this question simply because he wanted to maintain the same effect between the two DIVs and use JS to control the adaptation. I suggest you not use a 2-person table, just use a table. , the first line is the header. . Because I see header is written in your JS code. .

By using a table, there will be no such inconsistency. . It can make the page better, so modify the plug-in.

The problem lies in line 501 in table.js, table.el.css('width', '100%');

Your table is set to 100% but the table inside But it uses pixels to set

I think this is also possible. For 100% understanding, each browser is different, but the original poster also mentioned that, taking the first column as an example, the second column of the two tables Each column has 99 pixels and the content is the same, so why can the second table be expanded? I think it has something to do with the difference in data in the second table. .

Quoting the reply from dd0607 on the 5th floor:
The problem lies in line 501 in table.js, table.el.css('width', '100%');

Your table is set to 100% but the table inside is set with pixels


I think this is also possible. The understanding of 100% varies from browser to browser, but the poster also mentioned it , taking the first column as an example, the first column of both tables is 99 pixels, and the content is the same, so why can the second table be opened? I think it is the second table...

You will know after running it. It is composed of 2 TABLEs, one for each color

When running with chrome, press F12 to see the elements. The code

is not to make two tables, but to encapsulate a grid control. The upper part is the grid header, and the lower part is each row of data, so two tables are used. The reason for not using a table is that the vertical scroll bar is required to be included inside the table, while for a table the scroll bar is outside
but you can use F12 to see that the attributes are the same and the same width is given.
It is normal under IE and Firefox, only Chrome is wrong

The problem lies in line 501 in table.js, table.el.css('width', '100% ');

Your table is set to 100%, but the table inside is set in pixels
The table here refers to the outermost grid, which is to adapt to the width of the parent container, not the inside. The two table elements, the two internal table elements are both fixed width

Quoting the reply from dd0607 on the 5th floor:

The problem lies in line 501 in table.js, table. el.css('width', '100%');

Your table is set to 100%, but the table inside is set in pixels

The table here refers to the outermost layer The grid is to adapt to the width of the parent container, not the two internal table elements. The two internal table elements are both of fixed width

You will know it by looking at the running code, or you Block that line and try again

Too lazy to download. It is recommended that the author directly send the code here in the future

Line 501 in table.js, table.el.css('width', '100%');

Comment this line off, and then if you change the width of the third column to 10, the problem still occurs
The width of the third column is changed in line 10 of test.js, width:50 //Changed to 10

I feel like it I know what you mean. Let me check again

fit.fit();

Fit assigns values ​​to the table. Check this part

After assigning values, the status of the upper and lower tables are the same

The reason was found. There was a problem when the width was dynamically modified during dragging. The body part was to modify the parent element first and then the child elements. The head part was just the opposite. There would be a problem under Chrome. It was ok after changing the order:
syncHeaderWidth : function () {
var w = this.getTotalWidth();
this.head.parent().width(w);
this.head.parent().parent().parent( ).width(this.el.width());
},

The reason is found. The problem is when the width is dynamically modified when dragging. The body part is to modify the parent element first. , and then modify the sub-elements, the head part is just the opposite, there will be problems under chrome, change the order and it will be ok:
syncHeaderWidth: function () {
var w = this.getTotalWidth();
this.head.parent().width(w);
this.head.parent().......

Actually. Why are the codes written by you, two similar functions, but different implementation steps? You have to review this yourself, haha. Generally speaking, people will write something similar, so this situation will not happen.