html - CSS - 表响应内部显示 :table + display:table-row/cell

Question

我目前正在与一家公司合作，我们需要在表格中显示数据。有些查询检索的字段太多，以至于输出表很快就会溢出。问题是他们的模板使用 display:table 和 display:table-row 等来实现垂直对齐、粘性页脚和其他一些视口(viewport)技巧。

此模板基于 Bootsrap3。使用响应式表格时，它不会起作用。无论我尝试修复什么 CSS，无论是更改其显示还是更改溢出规则等。

我发现了两个描述完全相同问题的问题，尽管它们没有答案。

Bootstrap 3 : table-responsive inside display:table-cell doesn't work

Boostrap responsive table is not responsive inside a "table"

你可以看看那里的代码，很简单。只是 bootstrap 的表格响应包裹着 display:table-row inside display:table。

当然，如果我删除两个显示，这会解决问题，但会在布局周围产生更糟糕的问题，因为所有内容都围绕此显示进行编码:表格。

所以我正在寻找一种不会破坏布局的解决方案。 “保持显示原样”，同时通过样式化或其他方式修复表格响应问题。我花了几个小时试图解决这个问题并进行研究，但到目前为止我没有运气。

提前致谢。

Answer 1

解决方案的关键是将 width: 100% 和 table-layout: fixed 设置为模板布局中使用的表格元素(您仍然可以使用橡胶柱、粘性页脚等)来让你的响应表工作。这是 pen .尝试禁用其中一个属性，您将看到您的问题。