Advertisement
Not a member of Pastebin yet?
Sign Up,
it unlocks many cool features!
- <div class="scrollableContainer">
- <table>
- <thead>
- <tr class="ui-state-default">
- <th colspan="4">Original</th>
- <th colspan="4">table heading</th>
- <th colspan="4">table heading</th>
- <th colspan="4">table heading</th>
- <th colspan="4">table heading</th>
- <th colspan="4">Current Pos</th>
- </tr>
- </thead>
- <tfoot>
- <tr class="ui-state-default">
- <th colspan="4">Original</th>
- <th colspan="4">table footer</th>
- <th colspan="4">table footer</th>
- <th colspan="4">table footer</th>
- <th colspan="4">table footer</th>
- <th colspan="4">Current Pos</th>
- </tr>
- </tfoot>
- <tbody>
- <tr class="ui-state-default">
- <th colspan="4">First Row</th>
- <td colspan="4">data</td>
- <td colspan="4">data</td>
- <td colspan="4">data</td>
- <td colspan="4">data</td>
- <td colspan="4">1</td>
- </tr>
- <tr class="ui-state-default even">
- <th colspan="4">Second Row</th>
- <td colspan="4">data</td>
- <td colspan="4">data</td>
- <td colspan="4">data</td>
- <td colspan="4">data</td>
- <td colspan="4">2</td>
- </tr>
- <tr class="ui-state-default">
- <th colspan="4">Third Row</th>
- <td colspan="4">data</td>
- <td colspan="4">data</td>
- <td colspan="4">data</td>
- <td colspan="4">data</td>
- <td colspan="4">3</td>
- </tr>
- <tr class="ui-state-default even">
- <th colspan="4">Fourth Row</th>
- <td colspan="4">data</td>
- <td colspan="4">data</td>
- <td colspan="4">data</td>
- <td colspan="4">data</td>
- <td colspan="4">4</td>
- </tr>
- <tr class="ui-state-default">
- <th colspan="4">Fifth Row</th>
- <td colspan="4">data</td>
- <td colspan="4">data</td>
- <td colspan="4">data</td>
- <td colspan="4">data</td>
- <td colspan="4">5</td>
- </tr>
- <tr class="ui-state-default">
- <th colspan="4">Fifth Row</th>
- <td colspan="4">data</td>
- <td colspan="4">data</td>
- <td colspan="4">data</td>
- <td colspan="4">data</td>
- <td colspan="4">5</td>
- </tr>
- <tr class="ui-state-default">
- <th colspan="4">Fifth Row</th>
- <td colspan="4">data</td>
- <td colspan="4">data</td>
- <td colspan="4">data</td>
- <td colspan="4">data</td>
- <td colspan="4">5</td>
- </tr>
- <tr class="ui-state-default">
- <th colspan="4">Fifth Row</th>
- <td colspan="4">data</td>
- <td colspan="4">data</td>
- <td colspan="4">data</td>
- <td colspan="4">data</td>
- <td colspan="4">5</td>
- </tr>
- <tr class="ui-state-default">
- <th colspan="4">Fifth Row</th>
- <td colspan="4">data</td>
- <td colspan="4">data</td>
- <td colspan="4">data</td>
- <td colspan="4">data</td>
- <td colspan="4">5</td>
- </tr>
- <tr class="ui-state-default">
- <th colspan="4">Fifth Row</th>
- <td colspan="4">data</td>
- <td colspan="4">data</td>
- <td colspan="4">data</td>
- <td colspan="4">data</td>
- <td colspan="4">5</td>
- </tr>
- <tr class="ui-state-default">
- <th colspan="4">Fifth Row</th>
- <td colspan="4">data</td>
- <td colspan="4">data</td>
- <td colspan="4">data</td>
- <td colspan="4">data</td>
- <td colspan="4">5</td>
- </tr>
- <tr class="ui-state-default">
- <th colspan="4">Fifth Row</th>
- <td colspan="4">data</td>
- <td colspan="4">data</td>
- <td colspan="4">data</td>
- <td colspan="4">data</td>
- <td colspan="4">5</td>
- </tr>
- <tr class="ui-state-default">
- <th colspan="4">Fifth Row</th>
- <td colspan="4">data</td>
- <td colspan="4">data</td>
- <td colspan="4">data</td>
- <td colspan="4">data</td>
- <td colspan="4">5</td>
- </tr>
- <tr class="ui-state-default">
- <th colspan="4">Fifth Row</th>
- <td colspan="4">data</td>
- <td colspan="4">data</td>
- <td colspan="4">data</td>
- <td colspan="4">data</td>
- <td colspan="4">5</td>
- </tr>
- <tr class="ui-state-default">
- <th colspan="4">Fifth Row</th>
- <td colspan="4">data</td>
- <td colspan="4">data</td>
- <td colspan="4">data</td>
- <td colspan="4">data</td>
- <td colspan="4">5</td>
- </tr>
- <tr class="ui-state-default">
- <th colspan="4">Fifth Row</th>
- <td colspan="4">data</td>
- <td colspan="4">data</td>
- <td colspan="4">data</td>
- <td colspan="4">data</td>
- <td colspan="4">5</td>
- </tr>
- <tr class="ui-state-default">
- <th colspan="4">Fifth Row</th>
- <td colspan="4">data</td>
- <td colspan="4">data</td>
- <td colspan="4">data</td>
- <td colspan="4">data</td>
- <td colspan="4">5</td>
- </tr>
- <tr class="ui-state-default">
- <th colspan="4">Fifth Row</th>
- <td colspan="4">data</td>
- <td colspan="4">data</td>
- <td colspan="4">data</td>
- <td colspan="4">data</td>
- <td colspan="4">5</td>
- </tr>
- <tr class="ui-state-default">
- <th colspan="4">Fifth Row</th>
- <td colspan="4">data</td>
- <td colspan="4">data</td>
- <td colspan="4">data</td>
- <td colspan="4">data</td>
- <td colspan="4">5</td>
- </tr>
- <tr class="ui-state-default">
- <th colspan="4">Fifth Row</th>
- <td colspan="4">data</td>
- <td colspan="4">data</td>
- <td colspan="4">data</td>
- <td colspan="4">data</td>
- <td colspan="4">5</td>
- </tr>
- <tr class="ui-state-default">
- <th colspan="4">Fifth Row</th>
- <td colspan="4">data</td>
- <td colspan="4">data</td>
- <td colspan="4">data</td>
- <td colspan="4">data</td>
- <td colspan="4">5</td>
- </tr>
- <tr class="ui-state-default">
- <th colspan="4">Fifth Row</th>
- <td colspan="4">data</td>
- <td colspan="4">data</td>
- <td colspan="4">data</td>
- <td colspan="4">data</td>
- <td colspan="4">5</td>
- </tr>
- <tr class="ui-state-default">
- <th colspan="4">Fifth Row</th>
- <td colspan="4">data</td>
- <td colspan="4">data</td>
- <td colspan="4">data</td>
- <td colspan="4">data</td>
- <td colspan="4">5</td>
- </tr>
- <tr class="ui-state-default">
- <th colspan="4">Fifth Row</th>
- <td colspan="4">data</td>
- <td colspan="4">data</td>
- <td colspan="4">data</td>
- <td colspan="4">data</td>
- <td colspan="4">5</td>
- </tr>
- <tr class="ui-state-default">
- <th colspan="4">Fifth Row</th>
- <td colspan="4">data</td>
- <td colspan="4">data</td>
- <td colspan="4">data</td>
- <td colspan="4">data</td>
- <td colspan="4">5</td>
- </tr>
- <tr class="ui-state-default">
- <th colspan="4">Fifth Row</th>
- <td colspan="4">data</td>
- <td colspan="4">data</td>
- <td colspan="4">data</td>
- <td colspan="4">data</td>
- <td colspan="4">5</td>
- </tr>
- <tr class="ui-state-default">
- <th colspan="4">Fifth Row</th>
- <td colspan="4">data</td>
- <td colspan="4">data</td>
- <td colspan="4">data</td>
- <td colspan="4">data</td>
- <td colspan="4">5</td>
- </tr>
- <tr class="ui-state-default">
- <th colspan="4">Fifth Row</th>
- <td colspan="4">data</td>
- <td colspan="4">data</td>
- <td colspan="4">data</td>
- <td colspan="4">data</td>
- <td colspan="4">5</td>
- </tr>
- <tr class="ui-state-default">
- <th colspan="4">Fifth Row</th>
- <td colspan="4">data</td>
- <td colspan="4">data</td>
- <td colspan="4">data</td>
- <td colspan="4">data</td>
- <td colspan="4">5</td>
- </tr>
- </tbody>
- </table>
- </div>
- .scrollableContainer {
- padding-top:60px;
- height: 200px;
- position:relative;
- }
- .scrollArea {
- height:100%;
- overflow-x:hidden;
- overflow-y:auto;
- }
- table {
- border-collapse: collapse;
- overflow-x: hidden;
- overflow-y: auto;
- }
- td, th {
- background: #fff;
- border-width: 0;
- border-bottom: 1px solid #B8B8B8;
- font-weight: normal !important;
- padding: 15px;
- text-align: left;
- vertical-align: middle;
- }
- tr.even {
- td, th {
- background: #f1f1f1;
- }
- }
- thead, tfoot {
- text-transform: uppercase;
- th {
- background: #ccc;
- }
- }
- body {
- color: #111;
- font-size: 16px;
- font-family: sans-serif;
- }
- $( "table tbody" ).sortable( {
- update: function( event, ui ) {
- $(this).children().each(function(index) {
- $(this).find('td').last().html(index + 1)
- });
- }
- });
Advertisement
Add Comment
Please, Sign In to add comment
Advertisement