CSS - Tabelle Responsive Innenanzeige: Tabelle + Anzeige: Tabellenzeile/Zelle

Question

Ich arbeite gerade an einem Projekt mit einer Firma, wo wir Daten in einer Tabelle anzeigen müssen. Einige Abfragen rufen so viele Felder ab, dass die Ausgabetabelle schnell überläuft. Das Problem ist, dass ihre Vorlage display: table und display: table-row und so für vertikale Ausrichtung, sticky footers und einige andere Viewport-Tricks verwendet.

Diese Vorlage basiert auf Bootsrap3. Wenn Sie mit dem Responsive-Tisch arbeiten, wird es einfach nicht funktionieren. Egal, was CSS ich versuche, es zu beheben, entweder ändern Sie die Anzeige oder Ändern der Überlaufregeln, etc.

Ich habe zwei Fragen gefunden, die genau das gleiche Problem beschreiben, obwohl sie unbeantwortet sind.

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

Boostrap responsive table is not responsive inside a "table"

Sie können dort den Code anschauen, ist es einfach. Einfaches Bootstrap-table-responsive Wrapped-Display: Tabellenzeile im Display: Tabelle.

Natürlich, wenn ich beide Anzeigen entferne löst das Problem, aber erstellt viel schlimmere Probleme rund um das Layout, weil alles um diese Anzeige codiert ist: Tabelle.

Also ich bin auf der Suche nach einer Lösung, die das Layout nicht bricht. "Behalten Sie die Anzeigen so, wie sie sind", während Sie das auf Tabellen reagierende Problem beheben, indem Sie es formatieren oder so. Ich habe Stunden damit verbracht, dies zu beheben und Nachforschungen anzustellen, aber bisher hatte ich kein Glück.

Vielen Dank im Voraus.

Answer 1

Der Schlüssel zur Lösung besteht darin, width: 100% und table-layout: fixed zu Tabellenelement im Layout Ihrer Vorlage (Sie können immer noch Gummisäulen, Sticky Footers etc.) verwenden, um Ihre reaktionsschnellen Tabellen arbeiten zu lassen. Hier ist die pen. Versuchen Sie, eine dieser Eigenschaften zu deaktivieren, damit das Problem angezeigt wird.