File
Add library
Share
Login or Register
Help
HTMLSaved
 
<!DOCTYPE html>
<html>
  <head>
    <link rel="shortcut icon" type="image/png" href="../static/tv.png" />
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
    <link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/5.0.1/css/bootstrap.min.css"/>
    <link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/v/bs5/jq-3.6.0/dt-1.11.3/b-2.0.1/r-2.2.9/datatables.min.css"/>
    <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/5.0.1/js/bootstrap.bundle.min.js"></script>
    <script type="text/javascript" src="https://cdn.datatables.net/v/bs5/jq-3.6.0/dt-1.11.3/b-2.0.1/r-2.2.9/datatables.min.js"></script>
    <link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/fixedcolumns/4.0.0/css/fixedColumns.bootstrap5.css"/>
    <script type="text/javascript" src="https://cdn.datatables.net/fixedcolumns/4.0.0/js/dataTables.fixedColumns.js"></script>
 
  </head>
  <body>
    <div class="container-fluid m-lg-5">
​
<div class=".container-fluid m-lg-5">
    <table id="table" style="display: none;" class="table table-dark table-striped display responsive nowrap"
        width="100%">
        <thead>
            <tr>
                <th>Buttons</th>
                <th>Info</th>
            </tr>
        </thead>
        <tbody>
            <tr>
                <td>
                    <input type="button" class="btn btn-success channelButton" value="Button 2"
                        style="width: 100%;">
                </td>
                <td>
                    <ul class="list-group list-group-horizontal">
                      <li class="list-group-item" >loooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooong</li>
                      <li class="list-group-item" >loooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooong</li>
                      <li class="list-group-item" >loooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooong</li>
                    </ul>
                </td>
            </tr>
            <tr>
                <td>
                    <input type="button" class="btn btn-success channelButton" value="Button 1"
                        style="width: 100%;">
                </td>
                <td>
                    <ul class="list-group list-group-horizontal">
                      <li class="list-group-item" >loooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooong</li>
                      <li class="list-group-item" >loooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooong</li>
                      <li class="list-group-item" >loooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooong</li>
                    </ul>
                </td>
            </tr>
        </tbody>
    </table>
</div>
      
    </div>
  </body>
</html>
CSSSaved
 
td.dtfc-fixed-left {
  z-index:2
}
JavaScriptSaved
 
    $(document).ready(function () {
        $('#table').dataTable({
            dom: 'lfrtip',
            pageLength: 25,
            order: [0, 'des'],
            autoWidth: true,
            ordering: false,
            responsive: false,
            language: {
                search: "",
                searchPlaceholder: 'Filter',
                lengthMenu: "_MENU_",
            },
            columnDefs: [
                { targets: [0], "orderDataType": "dom-text", type: 'string' },
            ],
            scrollX: true,
            scrollCollapse: true,
            paging: false,
            fixedColumns: true
        });
        $('#table').show();
    });
Output

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

Dismiss x
public
Bin info
anonymouspro
0viewers