CSS -表格响应式内部显示:表格+显示:表格-行/单元

Question

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

此模板基于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‘s display:table。

当然，如果我删除了两个显示，这解决了问题，但在布局周围造成了更糟糕的问题，因为所有东西都是围绕这个显示进行编码的:表。

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

提前谢谢。

Answer 1

解决方案的关键是将width: 100%和table-layout: fixed设置为模板布局中使用的表格元素(您仍然可以使用橡皮栏、粘性页脚等)，以获得响应式表格。这是pen。尝试禁用这些属性之一，您将显示您的问题。