Html 为什么表列的大小会改变，如何停止

我有一个表格，每行上都有一个内容可编辑的div，当您在内容区域中键入时，第一列的大小会缩小，从而改变div的大小。最终它会自动换行。我不想改变表格的布局（水平）。我怎样才能防止这种情况

<table style="width: 100%">
    <thead>
        <tr><th>id</th><th>Comments</th><th>Other stuff</th></tr>
    </thead>
    <tbody>
        <tr><td>1</td><td colspan="2"><div contenteditable="true" style="min-height: 1em; width: 100%; border: 1px solid red;"></div></td></tr>
        <tr><td>2</td><td colspan="2"><div contenteditable="true" style="min-height: 1em; width: 100%; border: 1px solid red;"></div></td></tr>
    </tbody>
</table>

我喜欢其他的东西
1.
2.

这个没有第一列就不行了

<table style="width: 100%">
    <thead>
        <tr><th>Comments</th><th>Other stuff</th></tr>
    </thead>
    <tbody>
        <tr><td colspan="2"><div contenteditable="true" style="min-height: 1em; width: 100%; border: 1px solid red;"></div></td></tr>
        <tr><td colspan="2"><div contenteditable="true" style="min-height: 1em; width: 100%; border: 1px solid red;"></div></td></tr>
    </tbody>
</table>

其他的东西

尝试像这样为表格标题添加宽度

<th style="width: 100px">

---

因此，当内容大小增加或减少时，列的宽度不会改变。

尝试像这样向表标题添加宽度

<th style="width: 100px">

---

因此，当内容大小增加或减少时，列的宽度不会改变。

如果未定义表列的

宽度，则表列总是根据其内容动态改变宽度。在您的情况下，
宽度
仅为
td
内部的
div
定义（相对值为100%，它只填充
td
，并且如果有更多内容，因为
td
本身没有任何
宽度设置，这也会导致td扩展），这不会影响
td
，因此宽度会根据内容而变化。
如果未定义表列的
宽度，则表列的宽度会因其内容而动态变化。在您的情况下，
宽度
仅为
td
内部的
div
定义（相对值为100%，它只填充
td
，并且如果有更多内容，因为
td
本身没有任何
宽度设置，这也会导致td扩展），这不会影响td，因此宽度会根据内容而变化。
我使用的解决方案使用@G-Cyr和@Amanullah Tanweer的点

HTML

javascript

$("table.has-comments tr:first-child th").each(function(index){
    let element = $(this);
    let width = element.width();
    element.css("width", width + "px");
});
$("table.has-comments").css("table-layout", "fixed");

结果是，我让页面设置表（宽度100%），然后javascript/jQuery修复列宽。最后，表格布局设置为“固定”。我知道，这不是最有效的解决方案，但我的页面是通过jsp动态呈现的，每天都会有所不同。
我使用的解决方案使用了@G-Cyr和@Amanullah Tanweer的点

HTML

javascript

$("table.has-comments tr:first-child th").each(function(index){
    let element = $(this);
    let width = element.width();
    element.css("width", width + "px");
});
$("table.has-comments").css("table-layout", "fixed");

结果是，我让页面设置表（宽度100%），然后javascript/jQuery修复列宽。最后，表格布局设置为“固定”。我知道，这不是最有效的解决方案，但我的页面是通过jsp动态呈现的，每天都会有所不同。
如果是关于表布局的：。。。但是3列和2列已经等于100%，这就给了我们额外的宽度。删除它并仅为不应调整大小的列设置一个宽度。如果是关于表格布局：。。。但是3列和2列已经等于100%，这就给了我们额外的宽度。将其移除，并仅将宽度设置为不应调整大小的列。