Bootstrap Table plug-in itself does not have fixed column function, and additional reference is required

Bootstrap table fixed columns.css and bootstrap table fixed columns.js

However, after referencing these two files, sometimes the columns are not aligned, and the effect of js is good

The complete code is as follows:

    <link rel="stylesheet" href="../../plugins/bootstrap-table-develop/src/bootstrap-table.css">
    <link rel="stylesheet" href="../../plugins/bootstrap-table-develop/src/bootstrap-table-fixed-columns.css">
<table class="table-striped table-hasthead nowrap" id="tableTest1" data-search="true" data-fixed-columns="true" data-fixed-number="3">
    <thead>
        <tr>
            <th></th>
            <th data-sortable="true">State description state description</th>
            <th data-sortable="true">Customer number</th>
            <th data-sortable="true">Customer name</th>
            <th data-sortable="true">Monitoring equipment No</th>
            <th data-sortable="true">Reminder balance</th>
            <th data-sortable="true">Unit price of charges</th>
            <th data-sortable="true">Settlement amount</th>
            <th data-sortable="true">Settling time</th>
            <th data-sortable="true">Real time settlement amount</th>
            <th data-sortable="true">Real time settlement time</th>
            <th class="lastcolumn">Customer editor</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td><i class="fa fa-square blue"></i></td>
            <td>5</td>
            <td>8</td>
            <td>Changzhou company Changzhou company Changzhou company Changzhou company</td>
            <td>Changzhou company</td>
            <td>5</td>
            <td>8</td>
            <td>5</td>
            <td>8</td>
            <td>5</td>
            <td>8</td>
            <td>8</td>
        </tr>
        <tr>
            <td><i class="fa fa-square blue"></i></td>
            <td>Customer number 6</td>
            <td>Customer No. customer No</td>
            <td></td>
            <td></td>
            <td>6</td>
            <td></td>
            <td></td>
            <td></td>
            <td></td>
            <td></td>
            <td></td>
        </tr>
    </tbody>
</table>
    <!-- jQuery 2.1.4 -->
    <script src="../../plugins/jQuery/jQuery-2.1.4.min.js"></script>
    <!-- Bootstrap 3.3.5 -->
    <script src="../../bootstrap/js/bootstrap.js"></script>
    <script src="../../dist/js/sidebarHeight.js"></script>
    <script src="../../plugins/bootstrap-table-develop/src/bootstrap-table.js"></script>
    <script src="../../plugins/bootstrap-table-develop/src/bootstrap-table-fixed-columns.js"></script>
    <script src="../../plugins/bootstrap-table-develop/src/locale/bootstrap-table-zh-CN.js"></script>
    <script type="text/javascript">
    $(function() {
        $('#tableTest1').bootstrapTable({
            height: $(window).height() - 360,
            onAll: function(name, args) {
                fixleftwidth()
            }
        });

        function fixleftwidth() {
            setTimeout(function() {
                var fixColumnTds = $(".fixed-table-body-columns tr:first-child td");
                var fixNum = fixColumnTds.length;
                var tableBody = $(".fixed-table-body tbody tr:first-child td");
                for (var i = 0; i < fixNum; i++) {
                    fixColumnTds.eq(i).width(tableBody.eq(i).width())
                }
            }, 0)
        }
        fixleftwidth()
        $(window).resize(function() {
            $('#tableTest1').bootstrapTable('resetView');
            fixleftwidth()
        });
    });
    </script>

Because js is used to force alignment, the fixleftwidth() function is executed when any event is triggered, and when the window changes, the fixleftwidth() function is also executed.

WeChat public number: front-end strategy

(release design and front end related articles)