Javascript 如何停止单元格'；s用于计算列宽的内容

我有一个具有动态宽度的表，每个列都是该宽度的动态部分，具体取决于单元格内容

在该表的标题中，我有一个设置为100%宽度的输入，它最初是隐藏的。触发时，将显示输入。不幸的是，如果列的单元格内容非常窄，则会重新计算列宽，并且宽度会跳变

如何将输入设置为只填充单元格的宽度，而不是将其推得更宽

我不相信有什么解决办法，但我想在放弃之前，我应该问问更大的社区。我的猜测是，如果没有硬编码宽度，我就无法做到，但这是不可能的。

编辑：我的解决方案是让浏览器计算单元格宽度，然后使用Javascript显式地将列宽设置为计算出的值。这允许单元格内容确定宽度，但我仍然可以设置宽度行为

函数切换输入（）{
var target=document.querySelector（“.hidden”）
var newStyle=（target.style.display='block'）？'none'：'block'；
document.querySelector（'.hidden'）.style.display=newStyle；
}
document.querySelector（'th'）。addEventListener（'click'，toggleInput）
表格，td，th{
边框：1px纯红；
}
*{
框大小：边框框；
}
桌子
输入{
宽度：100%；
}
.隐藏{
显示：无；
}

点击我
废话
要拉伸的较长文本
更多文本
使用以下CSS：

table { table-layout:fixed }

您的代码和修复程序：


函数切换输入（）{
var target=document.querySelector（“.hidden”）
var newStyle=（target.style.display='block'）？'none'：'block'；
document.querySelector（'.hidden'）.style.display=newStyle；
}
document.querySelector（'th'）。addEventListener（'click'，toggleInput）
表格，td，th{
边框：1px纯红；
}
*{
框大小：边框框；
}
桌子
输入{
宽度：100%；
}
表{表布局：固定；}
.隐藏{
显示：无；
}

点击我
废话
要拉伸的较长文本
更多文本
您可以在TH中手动设置列的宽度。我想如果没有硬编码宽度，我就无法设置，但这是不可能的。不太可能。来自MDN：“表和列宽由表和列元素的宽度或第一行单元格的宽度设置。后续行中的单元格不影响列宽。”我需要由每列的内容确定列的宽度。@Pickle-如果不设置固定的宽度，则不可能。