html当表格单元格的宽度变化时其嵌套的div的宽度随着变化的js代码

在HTML中，如果你想创建一个动态调整的表格单元格，其中包含一个随单元格宽度变化的内嵌`<div>`，你可以使用JavaScript配合CSS来实现。首先，在HTML里，给`<div>`设置一个相对单位（如百分比）的宽度，然后通过JavaScript获取表格单元格的实际宽度并应用到`<div>`上。这里是一个简单的示例：

<table id="dynamic-table">
  <tr>
    <td><div id="nested-div">这是一个动态宽的div</div></td>
  </tr>
</table>

<script>
window.onload = function() {
  var tableCell = document.getElementById('dynamic-table').getElementsByTagName('td')[0];
  var nestedDiv = document.getElementById('nested-div');

  tableCell.addEventListener('resize', function() {
    var cellWidth = this.offsetWidth;
    nestedDiv.style.width = (cellWidth - 20) + '%'; // 减去20是为了留出边距等空白区域
  });
};
</script>

在这个例子中，当`<td>`元素（即表格单元格）发生变化时，`onresize`事件触发，计算新的单元格宽度并更新`<div>`的`width`属性为其减去20%的边距后的百分比值。