html - 在 DIV 与 TD 内部时的 offsetWidth 不同

Question

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

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

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

这是入口代码entry

Here是设置列宽的地方

具体是我调试的代码如下

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

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

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

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

我查看了很多网站以确定 offsetWidth 的计算方式，但没有一个让我印象深刻。所以我要去 SO 社区看看浏览器 (Chrome) 中是否存在错误，或者是否有一个 css 属性我可以用来使其以相同的方式运行。

Answer 1

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

表格有一个 cellspacing 属性，它被 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>