My TH element currently has both left and right padding set to 18px. I am attempting to determine its width using jQuery, convert this width from pixels to a percentage, and then set the element's width based on this calculated percentage.
var originalWidth = $("#thElement").width();
var newWidth = (originalWidth / $("#thElement").parent().width()) * 100
$("#thElement").width(newWidth + "%");
Interestingly, when executing the code above, different browsers return different results. All browsers correctly exclude padding from the width calculation on the first line. However, only Firefox sets the element's width to the computed value without including padding. In IE11, Chrome, and Opera, the width ends up being 36px less due to the padding consuming part of the new width.
Seeking advice on how to solve this issue and ensure consistent behavior across all these browsers.
EDIT: Using jQuery 1.11.1