Dev Dev - 7 months ago 38
AngularJS Question

CSS Trick's Responsive Data Table (with inline edit mode) display issue

I am using the guide (click here) written by Chris at CSS-Tricks to create a responsive table. I am also trying to add inline editing to the table.

Plunker Demo

  • The responsiveness works in mobile-screen mode.
    enter image description here

  • The inline editing works before entering mobile-screen mode.
    enter image description here

  • It all goes down hill when inline editing is enabled in mobile-screen mode.
    enter image description here

Main 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;


This is coming because when you edit the code td has col-xs-12 div which have float:left, so td not getting proper height.

Try this code:

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