CSS-Trick Responsive Datentabelle (mit Inline-Bearbeitungsmodus) Anzeige Problem

Question

Ich benutze die Anleitung (click here) von Chris bei CSS-Tricks geschrieben, um eine reaktionsschnelle Tabelle zu erstellen. Ich versuche auch, der Tabelle Inline-Bearbeitung hinzuzufügen.

Plunker Demo

• Das Ansprechverhalten arbeitet im Mode-Mobil-Bildschirm.

• Die Inline-Bearbeitung funktioniert, bevor Sie in den Mobile-Screen-Modus wechseln.

• Wenn die Inline-Bearbeitung im Mobile-Screen-Modus aktiviert ist, geht alles verloren

Haupt CSS:

/* Force table to not be like tables anymore */ 
table, thead, tbody, th, td, tr { 
    display: block; 
} 
/* Hide table headers (but not display: none;, for accessibility) */ 
thead tr { 
    position: absolute; 
    top: -9999px; 
    left: -9999px; 
} 
tr { 
    border: 1px solid #ccc; 
} 
#demoTable td { 
    /* Behave like a "row" */ 
    border: none; 
    border-bottom: 1px solid #eee; 
    position: relative; 
    padding-left: 50%; 
} 
td:before { 
    /* Now like a table header */ 
    position: absolute; 

    /* Top/left values mimic padding */ 
    top: 6px; 
    left: 6px; 
    width: 45%; 
    padding-right: 10px; 
    white-space: nowrap; 
} 

Answer 1

Dies, weil kommt, wenn Sie den Code bearbeiten td hat col-xs-12 div die float:left haben, so td nicht die richtige Höhe zu bekommen.

Versuchen Sie diesen Code:

@media screen only and (max-width:767px){ 
    #demoTable td .col.col-xs-12 { 
     float: none; 
     padding: 0; 
    } 
}