.st-pinned { position: absolute; left: 0; top: 0; overflow: hidden; overflow-x: auto; } .st-pinned:before { content: ""; position: absolute; z-index: 1; right: 0; width: 1px; height: 100%; background: black; } .st-pinned table { border-right: none; border-left: none; width: 100%; } .st-pinned table th, .st-pinned table td { white-space: nowrap; } .st-pinned td:last-child { border-bottom: 0; } .st-pinned td:not(:first-child), .st-pinned th:not(:first-child) { display: none; } .st-scrollable-wrap { overflow: hidden; } .st-scrollable { margin-bottom: 0; overflow: visible; } .st-scrollable td, .st-scrollable th { position: relative; white-space: nowrap; overflow: hidden; } .st-scrollable td:first-child, .st-scrollable th:first-child { display: none; } .swipe-table.st-10 .st-pinned { width: 10%; } .swipe-table.st-10 .st-scrollable-wrap { margin-left: 10%; } .swipe-table.st-15 .st-pinned { width: 15%; } .swipe-table.st-15 .st-scrollable-wrap { margin-left: 15%; } .swipe-table.st-20 .st-pinned { width: 20%; } .swipe-table.st-20 .st-scrollable-wrap { margin-left: 20%; } .swipe-table.st-25 .st-pinned { width: 25%; } .swipe-table.st-25 .st-scrollable-wrap { margin-left: 25%; } .swipe-table.st-30 .st-pinned { width: 30%; } .swipe-table.st-30 .st-scrollable-wrap { margin-left: 30%; } .swipe-table.st-35 .st-pinned { width: 35%; } .swipe-table.st-35 .st-scrollable-wrap { margin-left: 35%; } .swipe-table { overflow: hidden; visibility: hidden; position: relative; } .swipe-table table { width: 100%; margin-bottom: 0; border: none; } .swipe-table[data-new='0'] .st-reload-text { color: #A9A9A9; border: none; } .swipe-table[data-new='0'] .st-reload-path { fill: #A9A9A9; } .swipe-table:not([data-new='0']) .st-reload-text { color: #696969; border: 1px solid #696969; } .swipe-table:not([data-new='0']) .st-reload-path { fill: #000; } .st-wrap { overflow: hidden; position: relative; } .st-wrap > div { float: left; width: 100%; position: relative; } .st-header { position: absolute; top: 0; left: 0; min-width: 100%; width: 100%; height: 50px; background-color: lightgrey; overflow: hidden; visibility: visible; } .st-header .st-pinned, .st-header .st-scrollable { height: 50px; } .st-header .st-pinned table, .st-header .st-scrollable table { table-layout: fixed; } .st-header .st-pinned table th, .st-header .st-scrollable table th { line-height: 50px; padding-top: 0; padding-bottom: 0; border-bottom: 0; } .st-header .st-pinned th { color: #696969; } .st-header .st-scrollable { cursor: ew-resize; position: relative; } .st-header .st-scrollable .st-scrollbar { position: absolute; display: block; height: 5px; bottom: 0; } .st-shadow { box-shadow: inset 0 0 9px; } .st-scrollbar { box-shadow: inset 0 0 1px; height: 5px; width: 100%; background-color: #f2f2f2; position: absolute; bottom: 50px; } .st-scrollbar div { background-color: #939393; height: 5px; } .st-controls { line-height: 50px; position: absolute; width: 100%; bottom: 0; display: -webkit-flex; display: flex; -webkit-justify-content: flex-end; justify-content: flex-end; height: 50px; text-align: center; } .st-controls > div { font-size: 2em; font-weight: bold; border-radius: 0 0 6px 6px; border: 1px solid #939393; background-color: lightgrey; } .st-controls > div:nth-child(3) { display: -webkit-flex; display: flex; -webkit-align-items: center; align-items: center; -webkit-justify-content: space-around; justify-content: space-around; } .st-controls > div .st-page-number { font-size: 0.6em; } .st-controls > div .st-reload-text { font-size: 0.5em; width: 2em; height: 2em; border-radius: 1em; line-height: 2em; text-align: center; } .st-controls > div .st-reload-svg { height: 0.8em; width: 0.8em; } .st-fullscreen .st-controls div { -webkit-flex-grow: 1; flex-grow: 1; } .st-not-fullscreen .st-controls div { -webkit-flex-basis: 50px; flex-basis: 50px; } .st-not-fullscreen .st-controls div:nth-child(3) { -webkit-order: -1; order: -1; -webkit-flex-grow: 1; flex-grow: 1; }