html - responsive table using table layout -
i've been trying figure out why table not displaying correctly on screen when @ 600px. tried on codepen , working okay there must stopping rendering on small screen.
(demo)
@media screen , (max-width:600px){ .sample{ background:blue; } table { border: 0; } table thead { display: none; } table tr { margin-bottom: 10px; display: block; border-bottom: 2px solid #ddd; width:100%; } table td { display: block; text-align: right; font-size: 13px; border-bottom: 1px dotted #ccc; width:100%; } table td:last-child { border-bottom: 0; } table td:before { content: attr(data-label); float: left; text-transform: uppercase; font-weight: bold; } }
this on web browser @ 600px.
Comments
Post a Comment