<div class="row">
    <div class="col-12">
        <div class="card">
            <div class="card-body"> 
                <style type="text/css">     
                    #datatable-fixedheader thead tr th:nth-child(1),
                    #datatable-fixedheader tbody tr td:nth-child(1) {
                        width: 5% !important;
                        text-align: center;
                    }

                    #datatable-fixedheader thead tr th:nth-child(2),
                    #datatable-fixedheader tbody tr td:nth-child(2) {
                        width: 200px !important;
                        text-align: left;
                    }

                    #datatable-fixedheader thead tr th:nth-child(3),
                    #datatable-fixedheader tbody tr td:nth-child(3) {
                        width: 50px !important;
                          text-align: left !important;
                    }

                    #datatable-fixedheader thead tr th:nth-child(4),
                    #datatable-fixedheader tbody tr td:nth-child(4) {
                        width: 10% !important;
                        text-align: center;
                    }

                    #datatable-fixedheader thead tr th:nth-child(5) {
                        width: 15% !important;
                    }

                    #datatable-fixedheader thead tr th:last-child,
                    #datatable-fixedheader tbody tr td:last-child {
                        text-align: center;
                    }

                    #datatable-fixedheader tbody tr td:nth-child(2),
                    #datatable-fixedheader tbody tr td:nth-child(2) p {
                        width: 200px !important;
                        max-width: 200px !important;
                        white-space: nowrap;
                        overflow: hidden;
                        text-overflow: ellipsis;
                    }

                    #datatable-fixedheader tbody tr td:nth-child(2) p {
                        display: none;
                    }

                    #datatable-fixedheader tbody tr td:nth-child(2) p:nth-child(1) {
                        display: block;
                    }
                </style>

                <!-- ❌ dt-responsive nowrap REMOVED -->
                <table id="datatable-fixedheader" class="table table-hover table-bordered">
                    <thead>
                        <tr>
                            <th>No.</th>
                            <th>Name</th> 
                            <th>Seqence</th>  
                            <th>Status</th>
                            <th>Action</th>
                        </tr>
                    </thead>
                    <tbody></tbody>
                </table>

                <div class="modal fade modal1" id="#modal1" tabindex="-1">
                    <div class="modal-dialog modal-md modal-dialog-centered">
                        <div class="modal-content">
                            <div class="modal-header">
                                <h5 class="modal-title">Vertical centered</h5>
                                <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
                            </div>
                            <div class="modal-body">
                                <form class="custom-validation" id="form" autocomplete="off">
                                    <div class="mb-3">
                                        <label class="form-label">Title</label>
                                        <input type="text" name="cat_name" id="cat_name" class="form-control" required>
                                        <input type="hidden" name="id" id="id">
                                    </div>

                                    <div class="mb-3">
                                        <label class="form-label">Sequence No.</label>
                                        <input type="text" name="sequence_no" id="sequence_no" class="form-control" required>
                                    </div> 

                                    <div class="modal-bottom-part">
                                        <button type="submit" class="btn btn-primary">Submit</button>
                                        <button type="reset" class="btn btn-secondary" data-bs-dismiss="modal">Cancel</button>
                                    </div>
                                </form>
                            </div>
                        </div>
                    </div>
                </div>

            </div>
        </div>
    </div>  
</div>

<?php $this->load->view('includes/footer'); ?>
</body>
</html>
