Absolute Element in der Tabelle verursacht die Tabelle zu aktivieren Überlauf-y: Scroll irgendwie

Question

Ich habe eine Tabelle mit einigen Diensten. Jeder Dienst hat ein "?" - Symbol, auf das der Besucher klicken kann, um weitere Informationen über den Dienst zu erhalten.

Siehe this fiddle

---

Die Wrapper-Tisch hat:

@media all and (max-width: 560px) { 
    .table-wrapper { 
     overflow-x: auto; 
     -webkit-overflow-scrolling: touch; 
    } 
} 

So können Sie leicht nach rechts scrollen oder links auf mobilen Geräten (da die Tabelle zu breit für kleine Bildschirme ist).

Aber hier ist das Problem: einige der Popups (vor allem die letzte) veranlassen den Wrapper der Tabelle vertikal zu scrollen, während es kein "overflow-y: scroll" hat!

Aufgrund der Popups erscheint eine Bildlaufleiste und Sie können innerhalb der Tabelle scrollen ... das ist nicht was ich will :( Also, wenn Sie diese Tabelle auf mobilen Geräten anzeigen können Sie nicht mehr die Seite nach unten, weil die Tabelle ist in der Art und Weise

Hier ist, was ich will: die Pop-ups haben „z-index: 1;“.. so die Pop-ups auf der fast alle anderen Elemente sein wird, also das Popup auch über Elemente schweben sollten Unten (und außerhalb der Tabelle). Die Tischhöhe sollte im Grunde die gleiche sein wie der Wrapper, aber das Popup muss über die Kanten dieses Wrappers (und der Tabelle) fließen können. Ich dachte, das wurde automatisch erledigt, weil es " Position: absolut; "aber das war nicht die cas e.

---

UPDATE:

Wirklich hässliche Lösung: Stellen Sie einen margin-bottom auf den Tisch gleich oder größer auf den letzten und höchsten Popup, so dass der Tisch-Wrapper keinen vertikalen Bildlauf benötigen. Aber wie gesagt: wirklich hässlich.

---

Siehe this fiddle

---

UPDATE (minor) : auf der Verpackung: "auto Überlauf-x", wenn der Tisch als der Bildschirm größer ist (ca. ich nur eingestellt . 560px), so dass das Problem auf Desktops nicht angezeigt wird.

---

Answer 1

EDIT2 Kasse diese jsFiddle Ich denke, es funktioniert jetzt :)

EDIT

, wenn Sie die vertikale Bildlaufleiste ausblenden möchten zeigt, dass, wenn der Bildschirm width ist < 560px dann können Sie einfach deaktivieren overflow-y:hidden verwenden und das Popup über andere Elemente zu zeigen, die folgende Tabelle Sie height:100% in Sie @media Abfrage

@media all and (max-width: 560px) { 
    .table-wrapper { 
    overflow-x: auto; 
    overflow-y:hidden; // <-- 
    height:100%;  // <-- 
    -webkit-overflow-scrolling: touch; 
    } 
} 

Und zu verstecken, den Raum nach der Tabelle können Sie die nicht festlegen nächstes Element zu einem negativenmargin-top wie diese

div_after_the_table { 
margin-top:-75px; 
} 

Answer 2

Wenn Sie Ihren Tisch in einem anderen div mit position: absolute; wickeln, werden die Popups der Lage sein, außerhalb von th anzuzeigen Der Überlauf.

Answer 3

div .more-info { 
    position: static; 
} 

Unmittelbares Mutter des absoluten Popup muss static positioniert werden, um es Scroll aus dem Tisch zu bekommen.

Ich habe für die gleiche Art von Problem gearbeitet, aber mein Problem ist immer noch ungelöst. Ich habe das Symbol position:absolute gesetzt, um es rechts von der ersten Spalte anzuzeigen, ohne es in die nächste Zeile einzufügen. Das Problem tritt jedoch bei der Popup-Positionierung mit dem Symbol auf, wenn das übergeordnete Element statisch positioniert wurde.

In Ihrem Fall wird es funktionieren.