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.

enter image description here


Comments

Popular posts from this blog

PHP DOM loadHTML() method unusual warning -

python - How to create jsonb index using GIN on SQLAlchemy? -

c# - TransactionScope not rolling back although no complete() is called -