CODEWITHSUNDEEP
htmlcsstwitter-bootstrapresponsive
Stratos
Stratos

Reputation: 31

CSS - Table Responsive inside display:table + display:table-row/cell

Im currently working on a project with a company where we need to display data in a table. Some queries retrieve so many fields that the output table quickly overflow. The problem is that their template uses display:table and display:table-row and such for vertical-align, sticky footers and some other viewport tricks.

This template is based on Bootsrap3. When working with the responsive table it just won't work. No matter what CSS I try to fix it, either changing its display or changing the overflow rules, etc.

I've found two questions that describe the exact same problem though they are unanswered.

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

Boostrap responsive table is not responsive inside a "table"

You can look at the code there, it's simple. Just bootstrap's table-responsive wrapped around display:table-row inside display:table.

Of course if I remove both displays this solves the problem but creates much worse problems all around the layout because everything is coded around this display:table.

So I'm looking for a solution that doesn't break the layout. "Keep the displays as it is" while fixing table-responsive problem by styling it or something. I've spend hours trying to fix this and doing research but I've had no luck so far.

Thanks in advance.

Upvotes: 3

Views: 1296

Answers (1)

vgoma
vgoma

Reputation: 36

Key to solution is to set width: 100% and table-layout: fixed to table element used in your template's layout (you'll still be able to use rubber columns, sticky footers etc) to get your responsive tables work. Here's the pen. Try to disable one of these properties and you'll get your issue displayed.

Upvotes: 2

Related Questions