Css 添加不更改任何列宽的表行

我有一个表，它在不指定列宽的情况下（使用bootstrap4）呈现得非常好

我想添加一个页脚，每个列包含一个输入字段。添加页脚会更改列的宽度，实际上会使表太宽。如何添加表格单元格并指示浏览器在计算列宽时不使用它

---

你可以看到一个例子。只需注释掉

，查看在没有输入的情况下如何呈现表格。我想在不更改列大小的情况下添加输入。

您可以使用

表格布局：固定，这样在添加行时列的宽度不会改变，但是默认情况下所有列的宽度都相同，如果要更改宽度，则需要显式设置宽度。
bootsrap 4使用
table sm
代替
table condensed
。这可能还不够，您可以在CSS中声明表布局，并为输入添加最大宽度：

table {table-layout:fixed;}
input {max-width:90%;}



您还可以接受流的输入，这样它们就不会进入到影响列宽的大小计算中

table {border:solid;}
tfoot tr th {position:relative;height:3.4em;/* an height needs to be set to hold the inputs unseen */}
input {position:absolute;max-width:90%;}

据我所知，没有CSS唯一的方法可以做到这一点

当然，JavaScript可以做到这一点，所以如果你不考虑作弊的话，这就是解决方案。

window.onload=function（）{
var theTable=document.querySelector（'.container.col-12.table condensed'）；
var firstRow=theTable.querySelector（'thead tr'）。单元格；
var footElements=theTable.querySelectorAll（'tfoot th*'）；
//首先，我们将tfoot的所有内容的宽度设置为0，这样它就不会占用空间
对于（变量i=0；i

第1列
第2列
第3列
包含大量文本的长单元格
2.
3.
感谢
表sm
，它确实让事情变得更好了，但并不能解决我的问题。我不想有一个固定的表，浏览器根据其内容正确设置列宽-我想保持这种行为。我只想告诉浏览器在决定每列的宽度时忽略页脚行。如果未将“表布局”设置为“固定”，则该表将扩展其宽度以适合其所包含的内容，很遗憾：（@zmbq诀窍可能是使用绝对值，以避免输入干扰列的宽度计算。请注意设置单元格的高度和位置：相对于绝对子项的大小。您可能还需要将文本对齐重置为左侧。确实如此。但是，我不想丢失自动表格布局，我只希望浏览器忽略页脚在计算布局时，我考虑过这样做，但最终做了更简单的事情——我固定了列宽（用百分比）我自己。好的。不过我会保留这个，以防有人发现这个问题并需要一个动态解决方案。实际上，我正在将此标记为正确答案，因为这是唯一一个提供问题解决方案的答案。顺便问一下，我们不需要在第一次更改宽度后让浏览器刷新表格吗？我希望必须调用
setTimeout
在设置固定宽度之前。@zmbq没有必要拒绝G-Cyr的答案，因为它确实提供了一个答案，给出了问题中的限制；我的答案只为寻找JavaScript解决方案的人提供了一个替代方案。