html表格单元格让嵌套的div元素把单元格的宽度撑开的js代码

HTML表格中，如果想要让嵌套的`<div>`元素撑开单元格（td）的宽度，通常需要配合JavaScript来动态调整。以下是一个简单的示例，假设我们有一个表格，每个单元格包含一个`<div>`，并希望根据`div`的内容自动调整宽度：

<table id="myTable">
    <tr>
        <td>
            <div class="content" id="cell1">内容1</div>
        </td>
        <td>
            <div class="content" id="cell2">内容2</div>
        </td>
    </tr>
</table>

<script>
    function adjustTableCellWidth() {
        const table = document.getElementById("myTable");
        Array.from(table.rows).forEach(row => {
            row.cells.forEach(cell => {
                const cellContent = cell.querySelector(".content");
                if (cellContent) {
                    cell.style.width = `${cellContent.offsetWidth}px`;
                }
            });
        });
    }

    // 初始设置宽度，或者在某些事件触发后（如窗口大小改变）调用该函数
    window.addEventListener('DOMContentLoaded', adjustTableCellWidth);
    window.addEventListener('resize', adjustTableCellWidth);
</script>

这个脚本会在页面加载完成和窗口大小变化时，获取每个`.content`元素的实际宽度，并将其作为其父单元格`<td>`的宽度。请注意，这只是一个基础示例，实际应用中可能需要处理更多的边缘情况，比如IE浏览器兼容性等。