Cố định cột và dòng table trong jquery

Khi làm app web thì các table dữ liệu rất nhiều, hướng dẫn các bước để xử lý cố định 1 cột trong table html với jquery

Các bước để xử lý cố định 1 cột trong table html với jquery

Chuẩn bị file HTML để cố định cột (fix column table):


<!DOCTYPE html>

<html>

<head>

    <meta charset="utf-8" />

    <meta http-equiv="X-UA-Compatible" content="IE=edge">

    <title>freeze-table Demo iif.vn</title>

    <meta name="viewport" content="width=device-width, initial-scale=1">

    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css">

    <!-- Custom styles for this template -->

    <link href="narrow-jumbotron.css" rel="stylesheet">

    <!-- Custom style for Freeze Table -->

    <style>

    table {

        font-size: 10pt;

    }

    </style>

</head>

<body>



<div class="container">

<div class="table-basic">

    <table cellspacing="0" class="table table-sm table-bordered table-striped" style="min-width: 1200px;">

      <thead>

      <tr>

        <th>STT</th>

        <th>TÊN</th>

        <th>ĐỊA CHỈ</th>

        <th>ĐIỆN THOẠI</th>

        <th>GHI CHÚ</th>

        <th>NỘI DUNG 1</th>

        <th>NỘI DUNG 2</th>

      </tr>

    </thead>

     <tbody>

        <tr>

            <td>1</td>

            <td>TRẦN VĂN</td>

            <td>Số 1 Lê Duẫn, ĐN</td>

            <td>0972131419</td>

            <td>Xin cảm ơn quý khách đã mua hàng 1!</td>

            <td>Xin cảm ơn quý khách đã mua hàng 2!</td>

            <td>Xin cảm ơn quý khách đã mua hàng 3!</td>

        </tr>

        <tr>

            <td>2</td>

            <td>TRẦN VĂN</td>

            <td>Số 1 Lê Duẫn, ĐN</td>

            <td>Xin cảm ơn quý khách đã mua hàng 1!</td>

            <td>Xin cảm ơn quý khách đã mua hàng 2!</td>

            <td>Xin cảm ơn quý khách đã mua hàng 3!</td>

        </tr>

        <tr>

            <td>3</td>

            <td>TRẦN VĂN</td>

            <td>Số 1 Lê Duẫn, ĐN</td>

            <td>Xin cảm ơn quý khách đã mua hàng 1!</td>

            <td>Xin cảm ơn quý khách đã mua hàng 2!</td>

            <td>Xin cảm ơn quý khách đã mua hàng 3!</td>

        </tr>

         <tr>

            <td>4</td>

            <td>TRẦN VĂN</td>

            <td>Số 1 Lê Duẫn, ĐN</td>

            <td>Xin cảm ơn quý khách đã mua hàng 1!</td>

            <td>Xin cảm ơn quý khách đã mua hàng 2!</td>

            <td>Xin cảm ơn quý khách đã mua hàng 3!</td>

        </tr>

     </tbody>   

    

    </table>

    

</div>

</div> <!-- /container -->

  

<script src="https://code.jquery.com/jquery-2.2.4.js"></script>

<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js"></script>

<script src="https://yidas.github.io/jquery-freeze-table/dist/js/freeze-table.js"></script>

<script>

$(document).ready(function() {

  $(".table-basic").freezeTable();

});

</script>

</body>

</html>

Một số điểm chú ý code để cố định cột table trong javascript jquery

Thêm <div class="table-basic" style="min-width: 1200px;"> <table></table></div>

Chèn thư viện js dưới cùng:

Mời các bạn xem video cố định cột table trong jquery:

Đang cập nhật...

Tham khảo code tại: https://yidas.github.io/jquery-freeze-table/

Khi làm app web thì các table dữ liệu rất nhiều, hướng dẫn các bước để xử lý cố định 1 cột trong table html với jquery