CODEWITHSUNDEEP
jquerycss-tables
ProblemsOfSumit
ProblemsOfSumit

Reputation: 21375

jQuery: How to sync table cell/row heights

How can I synchronize the row-heights of two tables (which makes them look like ONE table if placed next to each other)? Here's a JSFiddle http://jsfiddle.net/2B8sy/ Works fine in Firefox - doesn't work in Chrome or IE.

Problem is, passing jQuerys .height() of a cell to another cells .height() makes the cells not equal in height in Chrome and IE - works fine in Firefox though.

As you can see in the Fiddle, the first rows are always 2 pixels too short. Happens to all rows. This is for Chrome and IE10. Everything is fine in Firefox.

Why does element.height(otherElement.height()); not make them equal in height? Example: http://jsfiddle.net/2B8sy/

I also tried window.getComputedStyle, but I got the same results there.

Upvotes: 4

Views: 1939

Answers (1)

JonRed
JonRed

Reputation: 2981

I've cracked this in Chrome. http://jsfiddle.net/2B8sy/5/

The issue was with the measuring of the td height. I've updated the CSS for the td as below:

table td {
    padding: 0;
    margin: 0;
    border: 1px solid #ccc;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
}

This extra code tells the browser to include padding and margins inside the height and width measurements, so you don't get discrepancies when working with these elements.

I suspect Chrome and the other failing browsers were not consistent in their read and set of this property.

Upvotes: 4

Related Questions