offsetWidth different when inside DIV vs TD

Question

I am using primeng with angular, However, it feels like my problem is with html/css.

I have found out how to present my ui the way I would like with the datatable component. However, when I leverage the datatable component inside the rowexpansion feature my column widths are not adhered to.

You will see that in the below table inside a table the column width is 100px. The parent table has it correctly set to 100px.

Here is the entry code entry

Here is where the width of the columns are set

Specifically the code that I debugged is below

for(let i = 0; i < columns.length; i++) {
   columns[i].style.width = columns[i].offsetWidth + 'px';
}

The offsetWidth is different for the parent then the child even though I am setting the style the same way for both tables.

My conclusion thus far is that offsetWidth is calculated differently when my table is inside a div vs inside of a td.

I looked at the default css for each HTML element and tried to make them match. However, it must be displayed as a table-cell because it requires the colspan attribute otherwise the row won't span the table as intended.

I have looked at a number of websites to determine how offsetWidth is calculated but nothing has stood out to me. So I am going to the SO community to see if there is a bug in the browser (Chrome) or if there is a css property I can use to make it behave the same way.

Pradeep Rajput · Answer 1 · 2017-12-29T21:12:22.990

The offsetWidth and offsetHeight returns the element's layout width and height. It includs the width of the visible content, scrollbars (if any), padding, and border. Read more here...

Table has a cellspacing property which is used by the TD tag. This cellspacing is not considered in offsetWidth or offsetHeight. Aside div tag has no cellspacing property.

Below example will clear/solve your problem.

var a = document.getElementById('div');
var b = document.getElementById('tda');
var log = document.getElementById('log');

//Border+Padding+ClientWidth
log.insertAdjacentHTML("beforeend","Div offset: "+a.offsetWidth);
log.insertAdjacentHTML("beforeend","<br />Table offset: "+b.offsetWidth);
log.insertAdjacentHTML("beforeend","<br />Table Tbody offset: "+b.children[0].offsetWidth);
log.insertAdjacentHTML("beforeend","<br />Table TR offset: "+b.children[0].children[0].offsetWidth);

//Border+Padding+ClientWidth, Except Cell spacing
log.insertAdjacentHTML("beforeend","<br />Table TD offset: "+ b.children[0].children[0].children[0].offsetWidth);

#tda {width:400px}
#div{width:100px;border: 1px solid red}

<div id="div">DIV</div>

<table id="tda" border="1" cellpadding="5" cellspacing="6">
  <tr>
    <td>TD</td>
    <td>TD</td>
  </tr>
</table>
<pre id="log"></pre>

How does this tell me why the offset is different for `td` vs `div` — Mark, Dec 29 '17 at 20:01
sorry @Pradeep but this did not help me. I know about those additional attributes but they were not being used in my tables. Also I didn't understand how this makes the when the width is identical between the `td` and the `div`. Based on the answer I provided, I suspect the browser handles content width different when the container is a `td` vs a `div`. — Mark, Dec 29 '17 at 23:49

score 0 · Answer 2 · answered Dec 29 '17 at 23:45

So I still don't know why I get different results between div and td.

However, looking here I was able to find the width property that does the same thing as auto, in my case, called max-content. When I set this CSS width property value on my table, I get the same result in the child as in the parent. See screenshot below:

Again I don't know why auto gives me different results for the child and the parent table but I found a workaround.

In case someone else is still interested, the best information I found for this so far was here.

offsetWidth different when inside DIV vs TD

2 Answers2