CSSトリックのレスポンシブデータテーブル（インライン編集モード付き）表示問題

Question

Chris（CSS-Tricks）が作成したガイド（click here）を使用して反応性の高いテーブルを作成しています。私はまた、インライン編集をテーブルに追加しようとしています。

Plunker Demo

• 応答性はモバイルスクリーンモードで動作します。

• インライン編集は、モバイル画面モードに入る前に機能します。

• モバイル画面モードでインライン編集が有効になっていると、すべてが下降します。

メイン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

あなたは、コードを編集するときtdがfloat:leftを持ってcol-xs-12のdivを持っているので、tdが適切な高さを得ていないので、これが来ています。あなたは素晴らしいです

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