Bootstrap reagiert Tabelle nicht korrekt auf iOS, funktioniert gut auf Android

Question

Meine Website verfügt über eine reaktionsschnelle Tabelle für den Einkaufswagen. Auf Android funktioniert es gut ... die linke Hälfte des Einkaufswagens wird angezeigt, und beim Durchstreichen erscheint kurzzeitig eine horizontale Bildlaufleiste und die Tabelle wechselt und zeigt die rechte Hälfte an.

Auf einem iPhone 6 scheint die linke Hälfte der Tabelle über die Ränder des Bildschirms zu bluten, so dass es hässlich aussieht. Beim Durchstreichen erscheint auch die graue Bildlaufleiste, aber der Bildschirm bewegt sich kaum und springt dann zurück, um nur die linke Hälfte anzuzeigen. Wenn ich meinen Finger auf den Bildschirm halte, kann ich ungefähr 50% der rechten Hälfte erscheinen lassen, bevor er zurückschnappt, wenn mein Finger den Rand des Bildschirms erreicht.

Ich schaute auf ähnliche ähnliche Fragen und versuchte die Lösungen, die ich sehen konnte, aber keiner machte einen Unterschied. Ich habe versucht:

overflow-y: scroll; /* has to be scroll, not auto */ 
-webkit-overflow-scrolling: touch; 

Ich habe versucht:

.table-responsive .table { 
max-width: none; 
} 

Ich habe versucht:

<meta name="viewport" content="width=device-width" /> 

und

<meta name="viewport" content="width=device-width, initial-scale=1" /> 

auf meiner Masterseite.

Ich habe Änderungen an meinen CSS-Dateien vorgenommen, den Dateien bootstrap.css und bootstrap.min.css.

Der HTML-Code für die Tabellen ist ziemlich einfach:

<div data-bind='if: Items().length' class="table-responsive"> 
         <table class="table outside-border"> 
          <thead> 
           <tr style="background-color: #eee;"> 
            <th>Prod #</th> 
            <th>Qty</th> 
            <th>Description</th> 
            <th class="text-right">Price</th> 
            <th class="text-right">Total</th> 
           </tr> 
          </thead> 
          <tfoot> 
           <tr class="double-top-border"> 
            <td colspan="3" class="text-right ">Subtotal: 
            </td> 
            <td colspan="2" class="text-bold text-right"> 
             <span data-bind="text: '$' + SubTotal().toFixed(2)"></span> 
            </td> 
           </tr> 
.... 

---

Hier Screenshots sind. Die ersten beiden sind das iPhone, das zweite zwei der Android:

---

Also, im Grunde, ich brauche Hilfe bei der Herstellung der iPhone-Site funktioniert in der Art, wie die Site auf Android funktioniert, wobei die Tabellen geteilt sind Der Bildschirm wird ohne die zerschnittenen Ränder und Überlappungen sauber angezeigt, damit die Tabellen vollständig gescrollt werden können und der Tisch beim Scrollen in der rechten Hälfte bleibt und nicht zurückspringt. Danke für jede Hilfe!

Answer 1

Scheint Problem in horizontales Scrollen ist ...

Verwendung Inline CSS div:

style="overflow-x:scroll" 

<div data-bind='if: Items().length' class="table-responsive" style="overflow-x:scroll"> 

Wenn diese dann auf bestimmte Klasse verwenden funktioniert, wenn Sie wollen.