Not a member of Pastebin yet?
Sign Up,
it unlocks many cool features!
- <div class="row">
- <div class="col-md-12">
- <div class="sticky-table sticky-headers sticky-ltr-cells">
- <table class="table table-striped table-striped">
- <thead>
- <tr class="sticky-row">
- <th class="sticky-cell">Campaign Name</th>
- <th class="sticky-cell">Ad Sets</th>
- <th class="sticky-cell">Ads</th>
- <th>Blue</th>
- <th>2000</th>
- <th>Ford</th>
- <th>Escort</th>
- <th>Blue</th>
- <th>2000</th>
- <th>Ford</th>
- <th>Escort</th>
- <th>Blue</th>
- <th>2000</th>
- <th>2000</th>
- <th>Ford</th>
- <th>Escort</th>
- <th>Blue</th>
- <th>2000</th>
- <th>2000</th>
- <th>Ford</th>
- <th>Escort</th>
- <th>Blue</th>
- <th>2000</th>
- <th>2000</th>
- <th>Ford</th>
- <th>Escort</th>
- <th>Blue</th>
- <th>2000</th>
- <th>2000</th>
- <th>Ford</th>
- <th>Escort</th>
- <th>Blue</th>
- <th>2000</th>
- <th>2000</th>
- <th>Ford</th>
- <th>Escort</th>
- <th>Blue</th>
- <th>2000</th>
- </tr>
- </thead>
- <tbody>
- <tr>
- <td class="sticky-cell">Demo Campaign</td>
- <td class="sticky-cell">100</td>
- <td class="sticky-cell">200</td>
- <td>2000</td>
- <td>Ford</td>
- <td>Escort</td>
- <td>Blue</td>
- <td>2000</td>
- <td>Ford</td>
- <td>Escort</td>
- <td>Blue</td>
- <td>2000</td>
- <td>2000</td>
- <td>Ford</td>
- <td>Escort</td>
- <td>Blue</td>
- <td>2000</td>
- <td>2000</td>
- <td>Ford</td>
- <td>Escort</td>
- <td>Blue</td>
- <td>2000</td>
- <td>2000</td>
- <td>Ford</td>
- <td>Escort</td>
- <td>Blue</td>
- <td>2000</td>
- <td>2000</td>
- <td>Ford</td>
- <td>Escort</td>
- <td>Blue</td>
- <td>2000</td>
- <td>2000</td>
- <td>Ford</td>
- <td>Escort</td>
- <td>Blue</td>
- <td>2000</td>
- <td>2000</td>
- </tr>
- <tr>
- <td class="sticky-cell">Demo Campaign</td>
- <td class="sticky-cell">100</td>
- <td class="sticky-cell">200</td>
- <td>Blue</td>
- <td>2000</td>
- <td>Ford</td>
- <td>Escort</td>
- <td>Blue</td>
- <td>2000</td>
- <td>Ford</td>
- <td>Escort</td>
- <td>Blue</td>
- <td>2000</td>
- <td>2000</td>
- <td>Ford</td>
- <td>Escort</td>
- <td>Blue</td>
- <td>2000</td>
- <td>2000</td>
- <td>Ford</td>
- <td>Escort</td>
- <td>Blue</td>
- <td>2000</td>
- <td>2000</td>
- <td>Ford</td>
- <td>Escort</td>
- <td>Blue</td>
- <td>2000</td>
- <td>2000</td>
- <td>Ford</td>
- <td>Escort</td>
- <td>Blue</td>
- <td>2000</td>
- <td>2000</td>
- <td>Ford</td>
- <td>Escort</td>
- <td>Blue</td>
- <td>2000</td>
- </tr>
- <tr>
- <td class="sticky-cell">Demo Campaign</td>
- <td class="sticky-cell">100</td>
- <td class="sticky-cell">200</td>
- <td>Blue</td>
- <td>2000</td>
- <td>Ford</td>
- <td>Escort</td>
- <td>Blue</td>
- <td>2000</td>
- <td>Ford</td>
- <td>Escort</td>
- <td>Blue</td>
- <td>2000</td>
- <td>2000</td>
- <td>Ford</td>
- <td>Escort</td>
- <td>Blue</td>
- <td>2000</td>
- <td>2000</td>
- <td>Ford</td>
- <td>Escort</td>
- <td>Blue</td>
- <td>2000</td>
- <td>2000</td>
- <td>Ford</td>
- <td>Escort</td>
- <td>Blue</td>
- <td>2000</td>
- <td>2000</td>
- <td>Ford</td>
- <td>Escort</td>
- <td>Blue</td>
- <td>2000</td>
- <td>2000</td>
- <td>Ford</td>
- <td>Escort</td>
- <td>Blue</td>
- <td>2000</td>
- </tr>
- <tr>
- <td class="sticky-cell">Demo Campaign</td>
- <td class="sticky-cell">100</td>
- <td class="sticky-cell">200</td>
- <td>Blue</td>
- <td>2000</td>
- <td>Ford</td>
- <td>Escort</td>
- <td>Blue</td>
- <td>2000</td>
- <td>Ford</td>
- <td>Escort</td>
- <td>Blue</td>
- <td>2000</td>
- <td>2000</td>
- <td>Ford</td>
- <td>Escort</td>
- <td>Blue</td>
- <td>2000</td>
- <td>2000</td>
- <td>Ford</td>
- <td>Escort</td>
- <td>Blue</td>
- <td>2000</td>
- <td>2000</td>
- <td>Ford</td>
- <td>Escort</td>
- <td>Blue</td>
- <td>2000</td>
- <td>2000</td>
- <td>Ford</td>
- <td>Escort</td>
- <td>Blue</td>
- <td>2000</td>
- <td>2000</td>
- <td>Ford</td>
- <td>Escort</td>
- <td>Blue</td>
- <td>2000</td>
- </tr>
- <tr>
- <td class="sticky-cell">Demo Campaign</td>
- <td class="sticky-cell">100</td>
- <td class="sticky-cell">200</td>
- <td>Blue</td>
- <td>2000</td>
- <td>Ford</td>
- <td>Escort</td>
- <td>Blue</td>
- <td>2000</td>
- <td>Ford</td>
- <td>Escort</td>
- <td>Blue</td>
- <td>2000</td>
- <td>2000</td>
- <td>Ford</td>
- <td>Escort</td>
- <td>Blue</td>
- <td>2000</td>
- <td>2000</td>
- <td>Ford</td>
- <td>Escort</td>
- <td>Blue</td>
- <td>2000</td>
- <td>2000</td>
- <td>Ford</td>
- <td>Escort</td>
- <td>Blue</td>
- <td>2000</td>
- <td>2000</td>
- <td>Ford</td>
- <td>Escort</td>
- <td>Blue</td>
- <td>2000</td>
- <td>2000</td>
- <td>Ford</td>
- <td>Escort</td>
- <td>Blue</td>
- <td>2000</td>
- </tr>
- <tr>
- <td class="sticky-cell">Demo Campaign</td>
- <td class="sticky-cell">100</td>
- <td class="sticky-cell">200</td>
- <td>Blue</td>
- <td>2000</td>
- <td>Ford</td>
- <td>Escort</td>
- <td>Blue</td>
- <td>2000</td>
- <td>Ford</td>
- <td>Escort</td>
- <td>Blue</td>
- <td>2000</td>
- <td>2000</td>
- <td>Ford</td>
- <td>Escort</td>
- <td>Blue</td>
- <td>2000</td>
- <td>2000</td>
- <td>Ford</td>
- <td>Escort</td>
- <td>Blue</td>
- <td>2000</td>
- <td>2000</td>
- <td>Ford</td>
- <td>Escort</td>
- <td>Blue</td>
- <td>2000</td>
- <td>2000</td>
- <td>Ford</td>
- <td>Escort</td>
- <td>Blue</td>
- <td>2000</td>
- <td>2000</td>
- <td>Ford</td>
- <td>Escort</td>
- <td>Blue</td>
- <td>2000</td>
- </tr>
- <tr>
- <td class="sticky-cell">Demo Campaign</td>
- <td class="sticky-cell">100</td>
- <td class="sticky-cell">200</td>
- <td>Blue</td>
- <td>2000</td>
- <td>Ford</td>
- <td>Escort</td>
- <td>Blue</td>
- <td>2000</td>
- <td>Ford</td>
- <td>Escort</td>
- <td>Blue</td>
- <td>2000</td>
- <td>2000</td>
- <td>Ford</td>
- <td>Escort</td>
- <td>Blue</td>
- <td>2000</td>
- <td>2000</td>
- <td>Ford</td>
- <td>Escort</td>
- <td>Blue</td>
- <td>2000</td>
- <td>2000</td>
- <td>Ford</td>
- <td>Escort</td>
- <td>Blue</td>
- <td>2000</td>
- <td>2000</td>
- <td>Ford</td>
- <td>Escort</td>
- <td>Blue</td>
- <td>2000</td>
- <td>2000</td>
- <td>Ford</td>
- <td>Escort</td>
- <td>Blue</td>
- <td>2000</td>
- </tr>
- <tr>
- <td class="sticky-cell">Demo Campaign</td>
- <td class="sticky-cell">100</td>
- <td class="sticky-cell">200</td>
- <td>Blue</td>
- <td>2000</td>
- <td>Ford</td>
- <td>Escort</td>
- <td>Blue</td>
- <td>2000</td>
- <td>Ford</td>
- <td>Escort</td>
- <td>Blue</td>
- <td>2000</td>
- <td>2000</td>
- <td>Ford</td>
- <td>Escort</td>
- <td>Blue</td>
- <td>2000</td>
- <td>2000</td>
- <td>Ford</td>
- <td>Escort</td>
- <td>Blue</td>
- <td>2000</td>
- <td>2000</td>
- <td>Ford</td>
- <td>Escort</td>
- <td>Blue</td>
- <td>2000</td>
- <td>2000</td>
- <td>Ford</td>
- <td>Escort</td>
- <td>Blue</td>
- <td>2000</td>
- <td>2000</td>
- <td>Ford</td>
- <td>Escort</td>
- <td>Blue</td>
- <td>2000</td>
- </tr>
- <tr>
- <td class="sticky-cell">Demo Campaign</td>
- <td class="sticky-cell">100</td>
- <td class="sticky-cell">200</td>
- <td>Blue</td>
- <td>2000</td>
- <td>Ford</td>
- <td>Escort</td>
- <td>Blue</td>
- <td>2000</td>
- <td>Ford</td>
- <td>Escort</td>
- <td>Blue</td>
- <td>2000</td>
- <td>2000</td>
- <td>Ford</td>
- <td>Escort</td>
- <td>Blue</td>
- <td>2000</td>
- <td>2000</td>
- <td>Ford</td>
- <td>Escort</td>
- <td>Blue</td>
- <td>2000</td>
- <td>2000</td>
- <td>Ford</td>
- <td>Escort</td>
- <td>Blue</td>
- <td>2000</td>
- <td>2000</td>
- <td>Ford</td>
- <td>Escort</td>
- <td>Blue</td>
- <td>2000</td>
- <td>2000</td>
- <td>Ford</td>
- <td>Escort</td>
- <td>Blue</td>
- <td>2000</td>
- </tr>
- <tr>
- <td class="sticky-cell">Demo Campaign</td>
- <td class="sticky-cell">100</td>
- <td class="sticky-cell">200</td>
- <td>Blue</td>
- <td>2000</td>
- <td>Ford</td>
- <td>Escort</td>
- <td>Blue</td>
- <td>2000</td>
- <td>Ford</td>
- <td>Escort</td>
- <td>Blue</td>
- <td>2000</td>
- <td>2000</td>
- <td>Ford</td>
- <td>Escort</td>
- <td>Blue</td>
- <td>2000</td>
- <td>2000</td>
- <td>Ford</td>
- <td>Escort</td>
- <td>Blue</td>
- <td>2000</td>
- <td>2000</td>
- <td>Ford</td>
- <td>Escort</td>
- <td>Blue</td>
- <td>2000</td>
- <td>2000</td>
- <td>Ford</td>
- <td>Escort</td>
- <td>Blue</td>
- <td>2000</td>
- <td>2000</td>
- <td>Ford</td>
- <td>Escort</td>
- <td>Blue</td>
- <td>2000</td>
- </tr>
- <tr>
- <td class="sticky-cell">Demo Campaign</td>
- <td class="sticky-cell">100</td>
- <td class="sticky-cell">200</td>
- <td>Blue</td>
- <td>2000</td>
- <td>Ford</td>
- <td>Escort</td>
- <td>Blue</td>
- <td>2000</td>
- <td>Ford</td>
- <td>Escort</td>
- <td>Blue</td>
- <td>2000</td>
- <td>2000</td>
- <td>Ford</td>
- <td>Escort</td>
- <td>Blue</td>
- <td>2000</td>
- <td>2000</td>
- <td>Ford</td>
- <td>Escort</td>
- <td>Blue</td>
- <td>2000</td>
- <td>2000</td>
- <td>Ford</td>
- <td>Escort</td>
- <td>Blue</td>
- <td>2000</td>
- <td>2000</td>
- <td>Ford</td>
- <td>Escort</td>
- <td>Blue</td>
- <td>2000</td>
- <td>2000</td>
- <td>Ford</td>
- <td>Escort</td>
- <td>Blue</td>
- <td>2000</td>
- </tr>
- <tr>
- <td class="sticky-cell">Demo Campaign</td>
- <td class="sticky-cell">100</td>
- <td class="sticky-cell">200</td>
- <td>Blue</td>
- <td>2000</td>
- <td>Ford</td>
- <td>Escort</td>
- <td>Blue</td>
- <td>2000</td>
- <td>Ford</td>
- <td>Escort</td>
- <td>Blue</td>
- <td>2000</td>
- <td>2000</td>
- <td>Ford</td>
- <td>Escort</td>
- <td>Blue</td>
- <td>2000</td>
- <td>2000</td>
- <td>Ford</td>
- <td>Escort</td>
- <td>Blue</td>
- <td>2000</td>
- <td>2000</td>
- <td>Ford</td>
- <td>Escort</td>
- <td>Blue</td>
- <td>2000</td>
- <td>2000</td>
- <td>Ford</td>
- <td>Escort</td>
- <td>Blue</td>
- <td>2000</td>
- <td>2000</td>
- <td>Ford</td>
- <td>Escort</td>
- <td>Blue</td>
- <td>2000</td>
- </tr>
- <tr>
- <td class="sticky-cell">Demo Campaign</td>
- <td class="sticky-cell">100</td>
- <td class="sticky-cell">200</td>
- <td>Blue</td>
- <td>2000</td>
- <td>Ford</td>
- <td>Escort</td>
- <td>Blue</td>
- <td>2000</td>
- <td>Ford</td>
- <td>Escort</td>
- <td>Blue</td>
- <td>2000</td>
- <td>2000</td>
- <td>Ford</td>
- <td>Escort</td>
- <td>Blue</td>
- <td>2000</td>
- <td>2000</td>
- <td>Ford</td>
- <td>Escort</td>
- <td>Blue</td>
- <td>2000</td>
- <td>2000</td>
- <td>Ford</td>
- <td>Escort</td>
- <td>Blue</td>
- <td>2000</td>
- <td>2000</td>
- <td>Ford</td>
- <td>Escort</td>
- <td>Blue</td>
- <td>2000</td>
- <td>2000</td>
- <td>Ford</td>
- <td>Escort</td>
- <td>Blue</td>
- <td>2000</td>
- </tr>
- </tbody>
- <tfoot>
- <tr>
- <th class="sticky-cell">Demo Campaign</th>
- <th class="sticky-cell">100</th>
- <th class="sticky-cell">200</th>
- <th>Blue</th>
- <th>2000</th>
- <th>Ford</th>
- <th>Escort</th>
- <th>Blue</th>
- <th>2000</th>
- <th>Ford</th>
- <th>Escort</th>
- <th>Blue</th>
- <th>2000</th>
- <th>2000</th>
- <th>Ford</th>
- <th>Escort</th>
- <th>Blue</th>
- <th>2000</th>
- <th>2000</th>
- <th>Ford</th>
- <th>Escort</th>
- <th>Blue</th>
- <th>2000</th>
- <th>2000</th>
- <th>Ford</th>
- <th>Escort</th>
- <th>Blue</th>
- <th>2000</th>
- <th>2000</th>
- <th>Ford</th>
- <th>Escort</th>
- <th>Blue</th>
- <th>2000</th>
- <th>2000</th>
- <th>Ford</th>
- <th>Escort</th>
- <th>Blue</th>
- <th>2000</th>
- </tr>
- </tfoot>
- </table>
- </div>
- </div>
- </div>
- $(document).on('stickyTable', function () {
- $(".sticky-headers").scroll(function() {
- $(this).find("table tr.sticky-row th").css('top', $(this).scrollTop());
- $(this).find("table tr.sticky-row td").css('top', $(this).scrollTop());
- });
- $(".sticky-ltr-cells").scroll(function() {
- $(this).find("table th.sticky-cell").css('left', $(this).scrollLeft());
- $(this).find("table td.sticky-cell").css('left', $(this).scrollLeft());
- });
- });
- $( document ).ready(function(){
- $( document ).trigger( "stickyTable" );
- });
- .sticky-table {
- max-width: 100%;
- max-height: 80vh;
- overflow: auto;
- border-top: 1px solid #ddd;
- border-bottom: 1px solid #ddd;
- padding: 0 !important;
- }
- .sticky-table table {
- margin-bottom: 0;
- width: 100%;
- max-width: 100%;
- border-spacing: 0;
- }
- .sticky-table table tr.sticky-row th, .sticky-table table tr.sticky-row td {
- background-color: #fff;
- border-top: 0;
- position: relative;
- outline: 1px solid #ddd;
- z-index: 5;
- }
- .sticky-table table td.sticky-cell, .sticky-table table th.sticky-cell {
- background-color: #fff;
- outline: 1px solid #ddd;
- position: relative;
- z-index: 10;
- }
- .sticky-table table tr.sticky-row td.sticky-cell, .sticky-table table tr.sticky-row th.sticky-cell {
- z-index: 15;
- }
- .sticky-table::-webkit-scrollbar {
- width: 0.7em;
- height: 0.7em;
- }
- .sticky-table::-webkit-scrollbar-track {
- -webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.3);
- }
- .sticky-table::-webkit-scrollbar-thumb {
- background-color: #b37e7e;
- outline: 1px solid slategrey;
- border-radius:5px;
- }
Add Comment
Please, Sign In to add comment