当DIV与TD内部时，offsetWidth不同

Question

我正在使用带角度的primeng，但是，感觉就像我的问题是html / css。

我已经找到了如何用数据表组件的方式呈现我的ui。但是，当我利用行扩展功能中的数据表组件时，我的列宽不会被遵守。

您将在表格中的下表中看到列宽为100px。父表将其正确设置为100px。

以下是条目代码entry

Here是设置列宽度的地方

具体来说，我调试的代码位于

之下

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

offsetWidth对于父级和子级是不同的，即使我为两个表设置相同的样式。

到目前为止，我的结论是，当我的表位于offsetWidth内部div内时，td的计算方式不同。

我查看了每个HTML元素的默认css，并尝试使它们匹配。但是，它必须显示为table-cell，因为它需要colspan属性，否则行不会按预期跨越表。

我查看了很多网站，以确定offsetWidth的计算方式，但没有任何一点对我有用。因此，我要访问SO社区，看看浏览器中是否存在错误（Chrome），或者是否有一个css属性，我可以使用它来使其行为方式相同。

Answer 1

offsetWidth和offsetHeight返回元素的布局宽度和高度。 它包括可见内容的宽度，滚动条（如果有），填充和边框。 Read more here...

表格具有 cellspacing 属性， TD 标记使用该属性。 offsetWidth 或 offsetHeight 不考虑 cellspacing 。除了div标签没有 cellspacing 属性。

下面的示例将清除/解决您的问题。

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>

Answer 2

所以我仍然不知道为什么我在div和td之间得到不同的结果。

但是，查看here我能够找到与auto相同的width属性，在我的例子中，名为max-content。当我在我的表上设置这个CSS宽度属性值时，我在子节点中获得与父节点相同的结果。见下面的截图：

我再次不知道为什么auto给了我不同的结果给孩子和父表，但我找到了一个解决方法。

如果其他人仍然感兴趣，我到目前为止找到的最佳信息是here。