2017-03-10 172 views
3

即时通讯目前正在与我们需要在表格中显示数据的公司的项目。有些查询会检索很多字段,导致输出表快速溢出。问题在于他们的模板使用display:table和display:table-row等等,以便进行垂直对齐,粘滞页脚和其他一些视口技巧。CSS - 表内响应显示:表+显示:表行/细胞

这个模板是基于Bootsrap3。使用响应表时,它将不起作用。不管我什么CSS来解决它,要么改变其显示或改变溢出规则等

我发现虽然他们是没有答案是描述完全相同的问题,两个问题。

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

Boostrap responsive table is not responsive inside a "table"

你可以看一下代码在那里,这很简单。只需引导程序的表格响应式环绕显示:表格行内部显示:表格。

当然,如果我删除这两个显示这解决了问题,但造成周围所有的布局,因为一切都围绕这显示编码更糟糕的问题:表。

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

在此先感谢。

回答

1

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