/** Developed by Dimitrios Mourloukos (http://www.tabulizer.com) based on an idea presented by Simon Elvery at http://elvery.net/ */ @media only screen and (max-width: 40em),(max-device-width: 640px) { /* Force table to not be like tables anymore */ .responsive-reflow table, .responsive-reflow thead, .responsive-reflow tbody, .responsive-reflow th, .responsive-reflow td, .responsive-reflow tr { display: block; } .responsive-reflow { width: auto; } /* Hide table headers (but not display: none;, for accessibility) */ .responsive-reflow thead tr { position: absolute; top: -9999px; left: -9999px; } .responsive-reflow tr { border: 1px solid #ccc; } .responsive-reflow td { /* Behave like a "row" */ border: none; border-bottom: 1px solid #eee; position: relative; padding-left: 0.3em; white-space: normal; text-align:left; width: 100%; } /* Label the data */ .responsive-reflow td:before { content: attr(data-title); display: inline-block; margin: -0.3em 1em -0.3em -0.3em; min-width: 45%; padding: 0.3em; font-weight: bold; text-align: left; text-shadow: 0 1px 0 #FFFFFF; } } /* @media only screen and (max-width: 40em),(max-device-width: 640px) { .responsive-reflow thead tr { position: relative; top: -10px; left: 0px; } .responsive-reflow thead tr td.sorting_disabled { display: none; } .responsive-reflow thead tr td { display: inline-block; text-align: left; } .responsive-reflow thead tr td::before { display: inline; text-align: left; min-width: 10%; } .responsive-reflow tbody tr td { text-align: left; } .responsive-reflow tbody tr td:before { text-align: left; } } */