html - 在DIV与TD内时，offsetWidth不同

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

我发现了如何以我希望的数据表组件的方式呈现我的用户界面。但是，当我在rowexpansion功能内利用datatable组件时，我的列宽没有得到遵守。

您将在下表中的表格内看到列宽为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属性来使其行为相同。

最佳答案

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

表具有TD标签所使用的cellspacing属性。在offsetWidth或offsetHeight中不考虑此单元格间距。除了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>

关于html - 在DIV与TD内时，offsetWidth不同，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/48027690/

offsetwidth

html - 在DIV与TD内时，offsetWidth不同