Skip welcome & menu and move to editor
Welcome to JS Bin
Load cached copy from
 
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>SortableJS Issue</title>
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.6.0/dist/css/bootstrap.min.css" />
</head>
<body>
  
<div class="container-fluid" style="padding-left:10px, padding-right:10px">
    <div class="table-container">
        <table class="table table-bordered">
            <thead class="table table-bordered">
                <tr>
                    <th class="orderable"
                        style="cursor: pointer">First Name</th>
                    <th class="orderable"
                        style="cursor: pointer">Last Name</th>
                    <th class="orderable"
                        style="cursor: pointer">Position At Work</th>
                    <th class="orderable"
                        style="cursor: pointer">Hire Date</th>
                </tr>
            </thead>
            <tbody id="groups">
                <tr data-id="60827" class="even">
                    <td style="padding-left:15px; cursor:pointer;">Matthew</td>
                    <td style="padding-left:15px; cursor:pointer;">Meyers</td>
                    <td style="15">CEO 0</td>
                    <td>Jan. 15, 2024</td>
                </tr>
                <tr data-id="60867" class="odd">
                    <td style="padding-left:30px; cursor:pointer;">Patricia</td>
                    <td style="padding-left:30px; cursor:pointer;">Schultz</td>
                    <td style="30">Deputy CEO 0</td>
                    <td>Jan. 15, 2024</td>
                </tr>
                <tr data-id="61028" class="even">
                    <td style="padding-left:45px; cursor:pointer;">Patricia</td>
                    <td style="padding-left:45px; cursor:pointer;">Smith</td>
                    <td style="45">Head Of Department 39</td>
                    <td>Jan. 15, 2024</td>
                </tr>
                <tr data-id="68868" class="odd">
                    <td style="padding-left:60px; cursor:pointer;">Linda</td>
                    <td style="padding-left:60px; cursor:pointer;">Moore</td>
                    <td style="60">Deputy HOD 199</td>
                    <td>Jan. 15, 2024</td>
                </tr>
            </tbody>
        </table>
    </div>
</div>
  <script src="//cdn.jsdelivr.net/npm/sortablejs@1.13.0/Sortable.js"></script>
</body>
</html>
Output 300px

You can jump to the latest bin by adding /latest to your URL

Dismiss x
public
Bin info
anonymouspro
0viewers