In my quest to create a responsive table with inline editing, I turned to Chris's guide at CSS-Tricks (check it out here). To see how it all comes together, take a look at this Plunker demo.
On mobile screens, the responsiveness is on point. https://i.stack.imgur.com/Fv0gb.png
Before switching to mobile mode, the inline editing feature works seamlessly. https://i.stack.imgur.com/AKO0Q.png
The trouble arises when trying to edit inline in mobile mode. https://i.stack.imgur.com/Unzl6.png
Key parts of the CSS code:
/* Transform the table layout */
table, thead, tbody, th, td, tr {
display: block;
}
/* Keep table headers hidden off-screen for accessibility */
thead tr {
position: absolute;
top: -9999px;
left: -9999px;
}
tr {
border: 1px solid #ccc;
}
#demoTable td {
/* Mimic row behavior */
border: none;
border-bottom: 1px solid #eee;
position: relative;
padding-left: 50%;
}
td:before {
/* Style like a header */
position: absolute;
/* Adjust for proper positioning */
top: 6px;
left: 6px;
width: 45%;
padding-right: 10px;
white-space: nowrap;
}