File
Add library
Share
Login or Register
Help
HTML
 
<html>
    <header>
        <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
        <script type="text/javascript" src="main.js"></script>
        <script type="text/javascript" charset="utf8" src="https://cdn.datatables.net/1.11.3/js/jquery.dataTables.js"></script>
        <style type="text/css">
            table {
                font-size: 12px;
                box-sizing: border-box;
                border-collapse: collapse;
                background-color: transparent;
                width: 684.333px;
            }
​
            td {
                box-sizing: border-box;
                padding: 0px 12px 0px 12px;
                border: 1px solid red;
                background-color: white !important;
                color: black;
            }
​
            th {
                box-sizing: border-box;
                border: 1px solid blue;
                height: 40px;
                padding: 0px 12px;
            }
        </style>
    </header>
    <body>
        <p>Header</p>
        <table id="table_id" class="display">
            <thead>
                <tr>
                    <th></th>
                    <th></th>
                    <th>Head3</th>
                    <th>Head4</th>
                    <th></th>
                </tr>
            </thead>
            <tbody>
                <tr>
                    <td>text</td>
                    <td>text</td>
                    <td>text</td>
                    <td>text</td>
                    <td><img style="width: 50; height: 20; padding-left: 10px; padding-right: 10px;" alt="1" src="https://cdn-icons-png.flaticon.com/512/5110/5110429.png"></td>
                </tr>
                <tr>
                    <td>text</td>
                    <td>text</td>
                    <td>text</td>
                    <td>text</td>
                    <td>22222</td>
                </tr>
            </tbody>
        </table>
    </body>
    <script>
        this.columns = [];
        this.columns.push({ width: '48px' });
        this.columns.push({ width: '52px' });
        this.columns.push(null);
        this.columns.push(null);
        this.columns.push({ width: '30px' });
​
​
        const config = {
            searching: false,
            scrollY: 200,
            scrollX: true,
            info: false,
            paging: false,
            lengthChange: false,
            jQueryUI: true,
            columns: this.columns,
            autoWidth: false
          };
        $(document).ready( function () {
            $('#table_id').DataTable(config);
        } );
    </script>
</html>
Output 300px

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

Dismiss x
public
Bin info
anonymouspro
0viewers