/** * Tidy Table * Generate a sortable HTML table from JSON * * Copyright 2012-2015, Marc S. Brooks (http://mbrooks.info) * Licensed under the MIT license: * http://www.opensource.org/licenses/mit-license.php * * Dependencies: * jquery.js */ table.tidy_table { background-color: #FFFFFF; border-collapse: collapse; border: 1px solid #CCCCCC; cursor: pointer; white-space: nowrap; } table.tidy_table thead { border: none; } table.tidy_table tr.check_on { background-color: #F5F5F5; } table.tidy_table tr.check_off { background-color: #FFFFFF; } table.tidy_table th { background-color: #DDDDDD; } table.tidy_table th.sort_asc { background: #EEEEEE url( images/arrow_asc.gif ) no-repeat right center; } table.tidy_table th.sort_desc { background: #EEEEEE url( images/arrow_desc.gif ) no-repeat right center; } table.tidy_table th, table.tidy_table td { padding: 6px 20px 6px 20px; } table.tidy_table td { border-right: 1px solid #EEEEEE; border-top: 1px solid #CCCCCC; padding: 7px 20px 7px 20px; } table.tidy_table th:nth-child(1), table.tidy_table td:nth-child(1) { width: 10px; } table.tidy_table td:nth-child(1) { border-right: 1px solid #EEEEEE; } table.tidy_table input[type=checkbox], table.tidy_table input[type=checkbox] { display: block; margin: 0px auto 0px auto; } table.tidy_table td:nth-last-child(1) { border-right: none; } table.tidy_table td span.label { display: none; } /* responsive (mobile devices) */ @media only screen and (min-device-width: 0px) and (max-device-width: 768px) { .tidy_table.media { margin: 0px !important; width: auto !important; overflow: none; } .tidy_table.media select { position: relative; right: 30px; } .tidy_table.media table { border: 0px; border-top: 1px solid #DDDDDD; width: 100%; } .tidy_table.media table tr { border-bottom: 1px solid #CCCCCC; position: relative; } .tidy_table.media table tbody tr:last-child { border: none; } .tidy_table.media table th, .tidy_table.media table td { box-sizing: border-box; border: 0px; clear: both; float: left; padding-left: 10px; } .tidy_table.media table th:first-child, .tidy_table.media table td:first-child { background-color: transparent; padding: 10px; position: absolute; right: 0px; top: 2px; width: auto; } .tidy_table.media table th { text-align: left; width: 100%; } .tidy_table.media table th:first-child { top: -40px; } .tidy_table.media table td { background-color: transparent; } }