我目前正在与一家公司合作开展项目，我们需要在表格中显示数据。某些查询检索了很多字段，导致输出表快速溢出。问题是他们的模板使用display：table和display：table-row等用于vertical-align，粘贴页脚和一些其他视口技巧。
此模板基于Bootsrap3。使用响应表时，它将无法正常工作。无论我尝试修复什么CSS，无论是更改其显示还是更改溢出规则等等。
我发现有两个问题描述了完全相同的问题，尽管它们没有答案。
Bootstrap 3 : table-responsive inside display:table-cell doesn't work
Boostrap responsive table is not responsive inside a "table"
您可以查看那里的代码，这很简单。只需bootstrap的响应式表格显示：显示内部的表格行：table。
当然，如果我删除这两个显示器，这可以解决问题，但会在布局周围产生更糟糕的问题，因为所有内容都围绕此显示进行编码：table。
所以我正在寻找一种不破坏布局的解决方案。 “保持显示不变”，同时通过样式化或其他方式修复表格响应问题。我花了好几个小时试图解决这个问题并进行研究，但到目前为止我还没有运气。
提前致谢。
答案 0 :(得分：2)
解决方案的关键是将width: 100%和table-layout: fixed设置为模板布局中使用的表格元素（您仍然可以使用橡胶列，粘性页脚等）让您的响应表工作。
这是pen。尝试停用其中一个属性，然后您就会显示问题。