<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: 15% !important; text-align: left;}
                                    #datatable-fixedheader thead tr th:nth-child(3), #datatable-fixedheader tbody tr td:nth-child(3) {width: 15% !important; text-align: left;}
                                    #datatable-fixedheader thead tr th:nth-child(4), #datatable-fixedheader tbody tr td:nth-child(4) {width: 20% !important; text-align: left;}
                                    #datatable-fixedheader thead tr th:nth-child(5), #datatable-fixedheader tbody tr td:nth-child(5) {width: 10% !important; text-align: center;}
                                    #datatable-fixedheader thead tr th:nth-child(6) {width: 15% !important;}
                                    #datatable-fixedheader thead tr th:nth-child(7), #datatable-fixedheader tbody tr td:nth-child(7) {width: 10% !important; text-align: center;}
                                    #datatable-fixedheader thead tr th:nth-child(8) {width: 10% !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,
                                    #datatable-fixedheader tbody tr td:nth-child(3),
                                    #datatable-fixedheader tbody tr td:nth-child(3) p,
                                    #datatable-fixedheader tbody tr td:nth-child(4),
                                    #datatable-fixedheader tbody tr td:nth-child(4) 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,
                                    #datatable-fixedheader tbody tr td:nth-child(3) p,
                                    #datatable-fixedheader tbody tr td:nth-child(4) p{ display: none; }
                                    #datatable-fixedheader tbody tr td:nth-child(2) p:nth-child(1),
                                    #datatable-fixedheader tbody tr td:nth-child(3) p:nth-child(1),
                                    #datatable-fixedheader tbody tr td:nth-child(4) p:nth-child(1){ display: block; }
                                </style>
                                <table id="datatable-fixedheader" class="table table-hover table-bordered dt-responsive nowrap">
                                    <thead>
                                        <tr>
                                            <th>No.</th>
                                            <th>Tag Name</th> 
                                            <th>Title</th>  
                                            <th>Description</th>  
                                            <th>Sequence</th>  
                                            <th>Date Time</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-lg 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" aria-label="Close"></button>
                                            </div>
                                            <div class="modal-body">
                                                <form class="custom-validation" action="#" id="form" enctype="multipart/form-data" accept-charset='utf-8' autocomplete="off">
                                                    <div class="mb-3">
                                                        <label class="form-label" for="tag_name">Tag Name</label>
                                                        <input type="text" name="tag_name" id="tag_name" class="form-control" required>
                                                        <input type="hidden" name="id" id="id" class="form-control">
                                                    </div>
                                                    <div class="mb-3">
                                                        <label class="form-label" for="title">Title</label>
                                                        <input type="text" name="title" id="title" class="form-control" required>
                                                    </div>
                                                    <div class="mb-3">
                                                        <label class="form-label" for="description">Description</label>
                                                        <textarea name="description" id="description" class="form-control" rows="4" required></textarea>
                                                    </div>
                                                    <div class="mb-3">
                                                        <label class="form-label" for="sequence_no">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" id="submit" class="btn btn-primary waves-effect waves-light me-1">Submit</button>
                                                        <button type="reset" id="cancel" class="btn btn-secondary waves-effect" data-bs-dismiss="modal">Cancel</button>
                                                    </div>
                                                </form>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>  
                </div>  
        <?php $this->load->view('includes/footer'); ?>
</body>
</html>