html设置表格嵌套的div随着用鼠标拖动单元格使单元格的宽度增加动态让div的宽度也增加

在HTML中，通过结合CSS和JavaScript可以实现表格嵌套的`<div>`元素跟随单元格宽度变化而动态调整大小。这里的一个基本步骤如下：

1. **HTML结构**：
使用`<table>`标签创建表格，其中包含`<td>`（表格数据单元格）和可能的`<div>`作为内部内容。例如：

   <table id="dynamicTable">
     <tr>
       <td>
         <div class="nestedDiv">内容</div>
       </td>
     </tr>
   </table>

2. **CSS样式**：
确保`div.nestedDiv`有一个初始宽度，并且相对于其容器`td`元素有固定的百分比宽度，以便随父元素的变化自动调整：

   .nestedDiv {
     width: 100%;
     overflow: auto;
   }

3. **JavaScript (jQuery示例)**：
使用JavaScript或者库如jQuery来监听`<td>`的`resize`事件，然后更新`<div>`的宽度。这里是简单的例子：

   $(document).ready(function() {
     $('#dynamicTable td').on('mousedown', function(e) {
       var div = $(this).find('.nestedDiv');
       var originalWidth = div.width();
       
       e.preventDefault(); // 阻止默认的拖动行为
       
       div.data('originalWidth', originalWidth); // 存储原始宽度

       $(document).mousemove(function(event) {
         var newWidth = event.clientX - e.clientX + originalWidth; // 新宽度计算
         div.width(newWidth);
       });

       $(document).mouseup(function() {
         $(document).off('mousemove'); // 移除鼠标移动事件处理
         div.width(div.data('originalWidth')); // 回到原始宽度
       });
     });
   });